react-navigation 4.0版本使用小记

示例

import React from 'react'; 
import { View, Text } from 'react-native'; 
import { createAppContainer } from 'react-navigation'; 
import { createStackNavigator } from 'react-navigation-stack'; 
class HomeScreen extends React.Component {
   render() {
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Home Screen</Text>
       </View>
     );
   } 
} 
const AppNavigator = createStackNavigator({
   Home: {
     screen: HomeScreen,
   },
 }); 
export default createAppContainer(AppNavigator);

跳转

第一次跳转 navigate

<Button           title="Go to Details"           
onPress={() => this.props.navigation.navigate('Details')}         />

再次跳转 push

<Button   title="Go to Details... again"   
onPress={() => this.props.navigation.push('Details')} />

返回 goBack

<Button           title="Go back"           
onPress={() => this.props.navigation.goBack()}         />

传参

传递

onPress={() => {
             this.props.navigation.navigate('Details', { 
              itemId: 86, 
              otherParam: 'anything you want here', 
            });
}}

获取

JSON.stringify(navigation.getParam('itemId', 'NO-ID')

设置头部显示

单个页面设置

class HomeScreen extends React.Component {
   static navigationOptions = {
     title: 'Home',
     headerStyle: {
       backgroundColor: '#f4511e',
     },
     headerTintColor: '#fff',
     headerTitleStyle: {
       fontWeight: 'bold',
     },
   };
   /* render function, etc */
}

动态设置

static navigationOptions = ({ navigation }) => {
     return {
       title: navigation.getParam('otherParam', 'A Nested Screen'),
     };
};

全局设置头部

const AppNavigator = createStackNavigator(
   {
     Home: HomeScreen,
     Details: DetailsScreen,
   },
   {
     initialRouteName: 'Home',
     /* The header config from HomeScreen is now here */ 
     defaultNavigationOptions: {
       headerStyle: {
         backgroundColor: '#f4511e',
       },
       headerTintColor: '#fff',
       headerTitleStyle: {
         fontWeight: 'bold',
       },
     },
   } 
);

头部使用自定义组件

class LogoTitle extends React.Component {
   render() {
     return (
       <Image
         source={require('./spiro.png')}
         style={{ width: 30, height: 30 }}
       />
     );
   } 
} 
class HomeScreen extends React.Component {
   static navigationOptions = {
     // headerTitle instead of title
     headerTitle: () => <LogoTitle />,
   };
   /* render function, etc */ 
}

头部两按钮

static navigationOptions = {
     headerTitle: () => <LogoTitle />,
     headerLeft: () => (),
     headerRight: () => (
       <Button
         onPress={() => alert('This is a button!')}
         title="Info"
         color="#fff"
       />
     ),   
};

AppContainer

import { createAppContainer } from 'react-navigation'; 
import { createStackNavigator } from 'react-navigation-stack'; 
const RootStack = createStackNavigator({ /* your routes here */ }); 
const AppContainer = createAppContainer(RootStack); 
// Now AppContainer is the main component for React to render 
export default AppContainer;

安装

除了安装 react-navigation，还需要安装其余的依赖

react-native-gesture-handler, react-native-reanimated, and react-native-screens.

参考： https://reactnavigation.org/docs/en/getting-started.html

页面开发中，需要安装 react-navigation-stack

import { createAppContainer } from 'react-navigation'; 
import { createStackNavigator } from 'react-navigation-stack';
const AppNavigator = createStackNavigator({
   Home: {
     screen: HomeScreen,
   },
 }); 
export default createAppContainer(AppNavigator);

参考： https://reactnavigation.org/docs/en/hello-react-navigation.html

Tab 切换需要安装 react-navigation-tabs

import { createBottomTabNavigator } from 'react-navigation-tabs';
const TabNavigator = createBottomTabNavigator({
   Home: HomeScreen,
   Settings: SettingsScreen,
 }); 
export default createAppContainer(TabNavigator);

参考： https://reactnavigation.org/docs/en/tab-based-navigation.html