导航器通过路由对象(route)来分辨不同的场景。每个路由对象都对应一个路由组件,开发者设置什么, 导航器显示什么,所以route是导航器中重要的一个对象。
三步操作实现导航功能:
- 设置路由对象,(告诉导航器要显示哪个页面)
创建路由对象,对象的内容自定义,但是必须包含该场景需要展示的页面组件
-
场景渲染配置,告诉导航器需要什么样的页面跳转效果
-
渲染场景(告诉导航器如何渲染页面)
利用第一步设置的路由对象进行渲染场景
-
例子
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Platform, Button } from 'react-native'; import {StackNavigator} from 'react-navigation'; class HomeScreen extends Component { static navigationOptions={ title:'Home' } render() { const {navigate}=this.props.navigation; return ( <View> <Text>home</Text> <Button onPress={()=>navigate('Chat',{user:'lucy',password:'123'})} title='go to chat'></Button> </View> ); } } class ChatScreen extends Component{ static navigationOptions=({navigation})=>{ title:`Chat with ${navigation.state.params.user}` }; render(){ const {params}=this.props.navigation.state return ( <View> <Text>chat with {params.user} ;password:{params.password}</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); const SimpleApp=StackNavigator({ Home:{screen:HomeScreen}, Chat:{screen:ChatScreen} }) AppRegistry.registerComponent('NavigationDemo', () => SimpleApp);