react-nativer入门学习之react-navigation

前言

最近有项目需要用到react-native,苦于网上资料杂乱无序，在学习道路上走了很多弯路。那这个系列会记录一下我的学习过程，将我从零开始的入门学习心得和大家分享一下。希望大家能够快速入门，提高效率。

react navigation V2

介绍

react-navigation是致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。

配置标题栏

• 在标题栏中使用参数

  screenProps是配置在根组件上面,也就是通过createStackNavigator创建的组件上。

  const RootStack = createStackNavigator(
    {
      Home: HomeScreen,
      Details: DetailsScreen,
    },
    {
      initialRouteName: \'Home\',
      /* The header config from HomeScreen is now here */
      navigationOptions: {
        headerStyle: {
          backgroundColor: \'#f4511e\',
        },
        headerTintColor: \'#fff\',
        header Style: {
          fontWeight: \'bold\',
        },
      },
    }
  );
  
  export default class App extends React.Component {
    render() {
      return <RootStack screenProps={{themeColor:\'red\'}} />;
    }
  }
  

  全部代码如下

  import React from \'react\';
  import { Button, Image, View, Text } from \'react-native\';
  import { createStackNavigator } from \'react-navigation\'; // Version can be specified in package.json
  import { CompositeDisposable } from \'rx\';
  
  class Logo  extends React.Component {
    render() {
     return <View><Text>标题</Text></View>
    }
  }
  
  class HomeScreen extends React.Component {
    static navigationOptions = ({navigation,screenProps}) =>  {
      return {
        // header  instead of  
        header : <Logo  />,
        headerStyle:{backgroundColor:screenProps?
          screenProps.themeColor:
          \'orange\'}
      } 
    }
  
    render() {
      return (
        <View style={{ flex: 1, alignItems: \'center\', justifyContent: \'center\' }}>
          <Text>Home Screen</Text>
          <Button
             =\"Go to Details\"
            onPress={() => {
              /* 1. Navigate to the Details route with params */
              this.props.navigation.navigate(\'Details\', {
                itemId: 86,
                otherParam: \'anything you want here\',
              });
            }}
          />
        </View>
      );
    }
  }
  
  class DetailsScreen extends React.Component {
    static navigationOptions = ({ navigation, navigationOptions }) => {
      console.log(navigationOptions);
      // Notice the logs ^
      // sometimes we call with the default navigationOptions and other times
      // we call this with the previous navigationOptions that were returned from
      // this very function
      return {
         : navigation.getParam(\'otherParam\', \'A Nested Details Screen\'),
        headerStyle: {
          backgroundColor: navigationOptions.headerTintColor,
        },
        headerTintColor: navigationOptions.headerStyle.backgroundColor,
      };
    };
  
    render() {
      /* 2. Get the param, provide a fallback value if not available */
      const { navigation } = this.props;
      const itemId = navigation.getParam(\'itemId\', \'NO-ID\'); 
      const otherParam = navigation.getParam(\'otherParam\', \'some default value\');
  
      return (
        <View style={{ flex: 1, alignItems: \'center\', justifyContent: \'center\' }}>
          <Text>Details Screen</Text>
          <Text>itemId: {JSON.stringify(itemId)}</Text>
          <Text>otherParam: {JSON.stringify(otherParam)}</Text>
          <Button
             =\"Go to Details... again\"
            onPress={() =>
              this.props.navigation.push(\'Details\', {
                itemId: Math.floor(Math.random() * 100),
              })}
          />
          <Button
             =\"Update the  \"
            onPress={() =>
              this.props.navigation.setParams({ otherParam: \'Updated!\' })}
          />
          <Button
             =\"Go to Home\"
            onPress={() => this.props.navigation.navigate(\'Home\')}
          />
          <Button
             =\"Go back\"
            onPress={() => this.props.navigation.goBack()}
          />
        </View>
      );
    }
  }
  
  const RootStack = createStackNavigator(
    {
      Home: HomeScreen,
      Details: DetailsScreen,
    },
    {
      initialRouteName: \'Home\',
      /* The header config from HomeScreen is now here */
      navigationOptions: {
        headerStyle: {
          backgroundColor: \'#f4511e\',
        },
        headerTintColor: \'#fff\',
        header Style: {
          fontWeight: \'bold\',
        },
      },
    }
  );
  
  export default class App extends React.Component {
    render() {
      return <RootStack screenProps={{themeColor:\'red\'}} />;
    }
  }