Reactive Native学习

开发环境的搭建

参照官方文档按照步骤来，开发工具选择的是WebStorm 环境搭建

We want to share code on iOS and Android, so lets delete the contents of index.ios.js and index.android.js and replace it with import './App'

基础语法

props 和 state

props:
this.props contains the props that were defined by the caller of this component
state:
The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
If you don't use it in render(), it shouldn't be on the state. For example, you can put timer IDs directly on the instance.
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

component生命周期

Mounting

These methods are called when an instance of a component is being created and inserted into the DOM

• constructor() The constructor for a React component is called before it is mounted

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

• componentWillMount() is invoked immediately before mounting occurs. It is called before render()
• componentDidMount() is invoked immediately after a component is mounted.

Updating

• componentWillReceiveProps() is invoked before a mounted component receives new props.
• shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true
• componentWillUpdate() is invoked immediately before rendering when new props or state are being received.

Note

• you cannot call this.setState() here. If you need to update state in response to a prop change, use componentWillReceiveProps() instead.
• componentWillUpdate() will not be invoked if shouldComponentUpdate() returns false.

• componentDidUpdate is invoked immediately after updating occurs

Unmounting

• componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in componentDidMount

待补充

FlexBox布局

flexDirection

• column： (默认值)竖直轴，子视图上下排列
• row ：水平轴，姿势图水平排列

alignItems

• flex-start
• center
• flex-end
• stretch

justifyContent

• flex-start
• center
• flex-end
• space-around
• space-between

React-Navigation

安装：npm install --save react-navigation

StackNavigator

export type NavigationScreenProp<S, A> = {
  state: S,
  dispatch: NavigationDispatch<A>,
  goBack: (routeKey?: ?string) => boolean,
  navigate: (
    routeName: string,
    params?: NavigationParams,
    action?: NavigationAction,
  ) => boolean,
  setParams: (newParams: NavigationParams) => boolean,
};

• navigate
  跳转到某个界面，可以传递参数，也可以传递一个callback
• goBack
  返回，出栈
• params
  传值到某个界面，在该界面中可以通过this.props.navigation.state.params去获得;
• navigate的时候传值

constructor (props) {
       super(props);
       //定义属性
       this.state = {
          userName: '' 
       };
   };
   
   render() {
       const { params } = this.props.navigation.state;
       return (
           <View>
               <Text>Chat with {params.user}</Text>
               <Text style={{backgroundColor: 'red'}}>Chat with {this.state.userName}</Text>
           </View>
       );
   };

   componentDidMount () {
       //解析数据
       const {params} = this.props.navigation.state;
       this.setState({
          userName: params.user
       });
   }

• goBack的时候回传值

render() {
       const { navigate } = this.props.navigation;
       return(
           <View>
               <Text>{this.state.content}</Text>
               <Button
                   onPress={() => navigate('Chat', { user: 'HeChao', callback: (data) => {
                       //console.log(data);
                       this.setState({content: `从chat界面回传的值 ${data}`});
                   }})}
                   title="Chat with HeChao"
               />
           </View>
       ); 
   }

传递一个callback，在跳转到的界面回到该界面的时候执行callback回传值

static navigationOptions = ({ navigation }) => {
     const {params} = navigation.state;
     const {navigate,goBack,state} = navigation;
     navigation.goBack();
     return {
         title: `Chat with ${params.user}`,
         headerLeft : <Button title={'Back'} onPress={() => {
             if (state.params.callback) {
                 state.params.callback('hahahaha');
             }
             goBack();
         }} />
     };
 };

TabNavigator