- 我们可以在
navigationOptions
中配置屏幕选项,比如title
。
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
- 使用
screen navigation prop
中的navigate
可跳转到指定屏幕上。同时我们可以早在其中放入新路由页面需要的数据,如下例中的user
。
class HomeScreen extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
</View>
);
}
}
// 当组件加入navigator,就会带有navigation这个props属性
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});
// this.props.navigation.state
class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
return (
<View>
<Text>Chat with {this.props.navigation.state.params.user}</Text>
</View>
);
}
}
- navigation prop
-
navigate(routeName, params, action)
: Link to other screens
-
state
: The screen's current state/route
this.props.navigation.state
一般结构如下:
{
// the name of the route config in the router
routeName: 'profile',
//a unique identifier used to sort routes
key: 'main0',
//an optional object of string options for this screen
params: { hello: 'world' }
}
-
setParams
: 用来改变route/state里的参数
-
goBack
: 关闭当前屏幕
render() {
const { goBack } = this.props
return (
<View>
<Button
onPress={() => goBack()}
title="Go back from this HomeScreen"
/>
<Button
onPress={() => goBack(null)}
title="Go back anywhere"
/>
<Button
onPress={() => goBack('screen-123')}
title="Go back from screen-123"
/>
</View>
)
}
-
dispatch
: 触发action
,需结合NavigationActions
使用
-
Navigation Options
配置屏幕导航选项
我们有两种方式,一是静态配置,如本文第一点;二是动态配置,来自props,包含:
-
navigation
: navigation state
screenProps
class ProfileScreen extends React.Component {
static navigationOptions = ({ navigation, screenProps }) => ({
title: navigation.state.params.name + "'s Profile!",
headerRight: <Button color={screenProps.tintColor} {...} />,
});
...
<SimpleApp
screenProps={{tintColor: 'blue'}}
// navigation={{state, dispatch}} // optionally control the app
/>
-
navigationOptions
: 默认或之前没有提供值的选项
在路由中配置的navigationOptions
优先级没有screen中高。
const MyTabNavigator = TabNavigator({
profile: ProfileScreen,
...
}, {
navigationOptions: {
headerTintColor: 'blue',
},
});
-
Navigation Actions
提供了以下action:
-
Navigate
: 根据navigate action
的结果更新当前state
import { NavigationActions } from 'react-navigation'
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)
-
Reset
: 擦除整个导航状态,并将其替换为多个动作的结果
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 1, // 用于指定当前活动路由,此处是 ‘Settings‘
actions: [ // 导航动作的阵列将取代导航状态
NavigationActions.navigate({ routeName: 'Profile'}),
NavigationActions.navigate({ routeName: 'Settings'})
]
})
this.props.navigation.dispatch(resetAction)
import { NavigationActions } from 'react-navigation'
const backAction = NavigationActions.back({
key: 'Profile' // 如果设置,导航将从给定的键返回。如果为空,导航将返回任何地方
})
this.props.navigation.dispatch(backAction)
-
SetParams
: 当发送SetParams动作时,路由器将产生一个新的状态,该状态改变了特定路由的参数,由key
标识
import { NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
params: { title: 'Hello' },
key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)
网友评论