React Native --react-navigation

从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator，则需要先npm i -S react-native-deprecated-custom-components，然后从这个模块中import，即import { Navigator } from 'react-native-deprecated-custom-components'.

React Navigation：

1.首先在应用中安装此库： $npm install --save react-navigation.

2.导入：import {StackNavigator} from 'react-navigation';

Demo1：

import React, { Component } from 'react'; import { AppRegistry, Text, View, Button, } from 'react-native'; import { StackNavigator} from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', headerRight: <Button title="More"/>, } render() { const {navigate} = this.props.navigation; return ( <View> <Text>Hello, Navigator</Text> <Button onPress = {() => navigate('Chat', {user: 'cece'})} title='start to chat' > </Button> </View> ); } } class ChatScreen extends Component { static navigationOptions = { title: 'Chat with friends', } render() { const {params} = this.props.navigation.state; return( <View><Text>chat with {params.user}</Text></View> ); } } const SimpleApp = StackNavigator({ Home: {screen: HomeScreen}, Chat: {screen: ChatScreen}, }); AppRegistry.registerComponent('HiFang', () => SimpleApp);

2. Nesting Navigators

首先import TabNavigator.

import React from 'react'; import { TabNavigator} from 'react-navigation'; import { AppRegistry, Text, View, Button, } from 'react-native'; class ChatScreen extends React.Component { render() { return <Text>comment list</Text>; } } class ContactScreen extends React.Component { render() { return <Text>contact list</Text>; } } const ScreenNavigator = TabNavigator({ Comment: {screen: ChatScreen}, Contact: {screen: ContactScreen}, }); AppRegistry.registerComponent('HiFang', () => ScreenNavigator);