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',
        headerTitleStyle: {
          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 LogoTitle extends React.Component {
    render() {
     return <View><Text>标题</Text></View>
    }
  }
  
  class HomeScreen extends React.Component {
    static navigationOptions = ({navigation,screenProps}) =>  {
      return {
        // headerTitle instead of title
        headerTitle: <LogoTitle />,
        headerStyle:{backgroundColor:screenProps?
          screenProps.themeColor:
          'orange'}
      } 
    }
  
    render() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Home Screen</Text>
          <Button
            title="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 {
        title: 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
            title="Go to Details... again"
            onPress={() =>
              this.props.navigation.push('Details', {
                itemId: Math.floor(Math.random() * 100),
              })}
          />
          <Button
            title="Update the title"
            onPress={() =>
              this.props.navigation.setParams({ otherParam: 'Updated!' })}
          />
          <Button
            title="Go to Home"
            onPress={() => this.props.navigation.navigate('Home')}
          />
          <Button
            title="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',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      },
    }
  );
  
  export default class App extends React.Component {
    render() {
      return <RootStack screenProps={{themeColor:'red'}} />;
    }
  }