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