- 我們可以在
navigationOptions中配置屏幕選項(xiàng)，比如title现使。
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
- 使用
screen navigation prop中的navigate可跳轉(zhuǎn)到指定屏幕上。同時(shí)我們可以早在其中放入新路由頁(yè)面需要的數(shù)據(jù)旷痕，如下例中的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>
);
}
}
// 當(dāng)組件加入navigator，就會(huì)帶有navigation這個(gè)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一般結(jié)構(gòu)如下：
{
// 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: 用來(lái)改變r(jià)oute/state里的參數(shù)
-
goBack: 關(guān)閉當(dāng)前屏幕
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: 觸發(fā)action欺抗，需結(jié)合NavigationActions使用
-
Navigation Options 配置屏幕導(dǎo)航選項(xiàng)
我們有兩種方式售碳，一是靜態(tài)配置，如本文第一點(diǎn)；二是動(dòng)態(tài)配置贸人，來(lái)自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: 默認(rèn)或之前沒(méi)有提供值的選項(xiàng)
在路由中配置的navigationOptions優(yōu)先級(jí)沒(méi)有screen中高。
const MyTabNavigator = TabNavigator({
profile: ProfileScreen,
...
}, {
navigationOptions: {
headerTintColor: 'blue',
},
});
-
Navigation Actions 提供了以下action:
-
Navigate: 根據(jù)navigate action的結(jié)果更新當(dāng)前state
import { NavigationActions } from 'react-navigation'
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)
-
Reset: 擦除整個(gè)導(dǎo)航狀態(tài)艺智，并將其替換為多個(gè)動(dòng)作的結(jié)果
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 1, // 用于指定當(dāng)前活動(dòng)路由倘要，此處是 ‘Settings‘
actions: [ // 導(dǎo)航動(dòng)作的陣列將取代導(dǎo)航狀態(tài)
NavigationActions.navigate({ routeName: 'Profile'}),
NavigationActions.navigate({ routeName: 'Settings'})
]
})
this.props.navigation.dispatch(resetAction)
-
Back: 返回上一屏幕并關(guān)閉當(dāng)前屏幕
import { NavigationActions } from 'react-navigation'
const backAction = NavigationActions.back({
key: 'Profile' // 如果設(shè)置，導(dǎo)航將從給定的鍵返回十拣。如果為空封拧，導(dǎo)航將返回任何地方
})
this.props.navigation.dispatch(backAction)
-
SetParams: 當(dāng)發(fā)送SetParams動(dòng)作時(shí)，路由器將產(chǎn)生一個(gè)新的狀態(tài)夭问，該狀態(tài)改變了特定路由的參數(shù)泽西，由key標(biāo)識(shí)
import { NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
params: { title: 'Hello' },
key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)
