style(tcr): flow error

packages/taro-components-rn/README.md

@@ -61,3 +61,7 @@ cp -rf src AwesomeProjectDir/src/tcr
   - [ ] camera
 - 其他
   - [ ] tabbar
+
+## D~
+
+[flow type annotation for children react elements](https://stackoverflow.com/a/42887802)

packages/taro-components-rn/src/components/Button/index.js

@@ -31,7 +31,7 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import * as React from 'react'
 import {
   TouchableOpacity,
   Text,
@@ -46,8 +46,8 @@ import styles from './styles'
 type Props = {
   style?: StyleSheet.Styles,
   children?: React.Node,
-  size?: 'default' | 'mini',
-  type?: 'primary' | 'default' | 'warn',
+  size: 'default' | 'mini',
+  type: 'primary' | 'default' | 'warn',
   plain?: boolean,
   disabled?: boolean,
   loading?: boolean,
@@ -57,7 +57,7 @@ type State = {
   valve: Animated.Value
 }
 
-class _Button extends Component<Props, State> {
+class _Button extends React.Component<Props, State> {
   props: Props
 
   static defaultProps = {

packages/taro-components-rn/src/components/Checkbox/checkbox-group.js

@@ -6,7 +6,7 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import * as React from 'react'
 import {
   View,
   StyleSheet
@@ -18,18 +18,19 @@ type Props = {
   onChange?: Function
 }
 
-class _CheckboxGroup extends Component<Props> {
+class _CheckboxGroup extends React.Component<Props> {
   props: Props
 
   values: Array<{ value: any, checked: boolean }> = []
   // checkboxs: React.Node = []
 
-  toggleChange = (e, index) => {
+  toggleChange = (e: { value: string, checked: boolean }, index: number) => {
+    const { onChange } = this.props
     this.values[index] = {
       value: e.value,
       checked: e.checked
     }
-    this.props.onChange({
+    onChange && onChange({
       detail: {
         value: this.values.filter((item) => item && item.checked).map((item) => item.value)
       }

packages/taro-components-rn/src/components/Checkbox/index.js

@@ -9,7 +9,7 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import * as React from 'react'
 import {
   View,
   TouchableWithoutFeedback,
@@ -21,22 +21,21 @@ import styles from './styles'
 type Props = {
   style?: StyleSheet.Styles,
   onChange?: Function,
-  value?: string,
+  value: string,
   disabled?: boolean,
   checked?: boolean,
-  color?: string
+  // @todo
+  color?: string | number
 }
 type State = {
   checked: boolean
 }
 
-class _Checkbox extends Component<Props, State> {
+class _Checkbox extends React.Component<Props, State> {
   props: Props
 
   static defaultProps = {
     value: '',
-    disabled: false,
-    checked: false
   }
 
   state: State = {

packages/taro-components-rn/src/components/Icon/index.js

@@ -13,7 +13,7 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import * as React from 'react'
 import {
   View,
   ART,
@@ -37,11 +37,11 @@ const iconTypeMap: Object = {
 type Props = {
   style?: StyleSheet.Styles,
   type: 'success' | 'success_no_circle' | 'info' | 'warn' | 'waiting' | 'cancel' | 'download' | 'search' | 'clear',
-  size?: number,
-  color?: string | number,
+  size: number,
+  color: string | number,
 }
 
-class _Icon extends Component<Props> {
+class _Icon extends React.Component<Props> {
   props: Props
 
   static defaultProps = {

packages/taro-components-rn/src/components/Image/index.js

@@ -14,9 +14,10 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import * as React from 'react'
 import {
   Image,
+  StyleSheet,
 } from 'react-native'
 import Clickable from '../_Clickable'
 
@@ -30,12 +31,12 @@ const resizeModeMap: Object = {
 type Props = {
   style?: StyleSheet.Styles,
   src?: string,
-  mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right',
+  mode: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right',
   binderror?: Function,
   bindload?: Function,
 }
 
-class _Image extends Component<Props> {
+class _Image extends React.Component<Props> {
   props: Props
 
   static defaultProps = {

packages/taro-components-rn/src/components/Progress/index.js

@@ -24,30 +24,31 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import * as React from 'react'
 import {
   View,
   Text,
   Animated,
   Easing,
+  StyleSheet,
 } from 'react-native'
 import styles from './styles'
 
 type Props = {
   style?: StyleSheet.Styles,
-  percent?: number,
+  percent: number,
   showInfo?: boolean,
-  strokeWidth?: number,
-  activeColor?: string,
-  backgroundColor?: string,
+  strokeWidth: number,
+  activeColor: string,
+  backgroundColor: string,
   active?: boolean,
-  activeMode?: 'backwards' | 'forwards',
+  activeMode: 'backwards' | 'forwards',
 }
 type State = {
   valve: Animated.Value
 }
 
-class _Progress extends Component<Props, State> {
+class _Progress extends React.Component<Props, State> {
   props: Props
   state: State = {
     valve: new Animated.Value(0)
@@ -61,7 +62,7 @@ class _Progress extends Component<Props, State> {
     activeMode: 'backwards',
   }
 
-  animate = (nextPercent = 0, nowPercent = 0) => {
+  animate = (nextPercent: number = 0, nowPercent: number = 0) => {
     const { active, activeMode } = this.props
     const toValve = nextPercent / 100
 

packages/taro-components-rn/src/components/Swiper/index.js

@@ -19,31 +19,31 @@
  * @flow
  */
 
-import React, { Component } from 'react'
+import * as React from 'react'
 import {
-  Text,
-  View,
+  // Text,
+  // View,
   StyleSheet,
 } from 'react-native'
 import Swiper from 'react-native-swiper'
-import styles from './styles'
+// import styles from './styles'
 
 type Props = {
   children?: React.Node,
   style?: StyleSheet.Styles,
   indicatorDots?: boolean,
-  indicatorColor?: string,
-  indicatorActiveColor?: string,
+  indicatorColor: string | number,
+  indicatorActiveColor: string | number,
   autoplay?: boolean,
-  current?: number,
-  interval?: number,
+  current: number,
+  interval: number,
   circular?: boolean,
   vertical?: boolean,
   onChange?: Function,
   onAnimationFinish?: Function,
 }
 
-class _Swiper extends Component<Props> {
+class _Swiper extends React.Component<Props> {
   props: Props
 
   static defaultProps = {
@@ -53,15 +53,15 @@ class _Swiper extends Component<Props> {
     interval: 5000,
   }
 
-  onIndexChanged = (index) => {
+  onIndexChanged = (index: number) => {
     const { onChange } = this.props
     onChange && onChange({ detail: { current: index } })
   }
 
   /**
    * e, state, context(ref to swiper's this)
    */
-  onMomentumScrollEnd = (e, state) => {
+  onMomentumScrollEnd = (e: any, state: { index: number }) => {
     const { onAnimationFinish } = this.props
     onAnimationFinish && onAnimationFinish({ detail: { current: state.index } })
   }