開(kāi)發(fā)環(huán)境的搭建

參照官方文檔按照步驟來(lái)，開(kāi)發(fā)工具選擇的是WebStorm 環(huán)境搭建

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'

基礎(chǔ)語(yǔ)法

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

待補(bǔ)充

FlexBox布局

flexDirection

• column： (默認(rèn)值)豎直軸，子視圖上下排列
• row ：水平軸，姿勢(shì)圖水平排列

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
  跳轉(zhuǎn)到某個(gè)界面，可以傳遞參數(shù)，也可以傳遞一個(gè)callback
• goBack
  返回，出棧
• params
  傳值到某個(gè)界面，在該界面中可以通過(guò)this.props.navigation.state.params去獲得;
• navigate的時(shí)候傳值

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 () {
       //解析數(shù)據(jù)
       const {params} = this.props.navigation.state;
       this.setState({
          userName: params.user
       });
   }

• goBack的時(shí)候回傳值

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>
       ); 
   }

傳遞一個(gè)callback，在跳轉(zhuǎn)到的界面回到該界面的時(shí)候執(zhí)行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