详情见React Navigation文档
createStackNavigator
-
createStackNavigator();是一个返回包含2个属性的对象的函数：Screen和Navigator。它们都是用于配置导航器的React组件。的元素Navigator应Screen作为其子元素来定义路由的配置。 -
Stack.Navigator是一个需要进行路由配置的组件，因为它是其子级，并带有用于配置的其他道具并呈现我们的内容。 -
每个Stack.Screen组件都有一个
name引用路径名称的componentprop和一个指定要为该路由渲染的组件的prop。这些是2个必备道具。 -
要指定堆栈中的初始路线是什么，请提供一个
initialRouteName作为导航器的道具。
要指定特定于屏幕的选项，我们可以将options Prop传递给Stack.Screen，对于普通选项，我们可以传递screenOptions给Stack.Navigator
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
};
const Stack = createStackNavigator();
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
注意:componentprop接受组件，而不是渲染函数。不要传递内联函数（例如component={() => }），否则当父组件重新渲染时，您的组件将被卸载并重新安装，从而丢失所有状态。
屏幕跳转:
在按钮中添加事件,传入想跳转的名称navigation.navigate('name')
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Details... again"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
注意: 当前页面跳转到当前页面,则不会跳转 ,但是要传递数据则将navigate替换成push
将导航器状态替换为新状态：
navigation.reset({
index: 0,
routes: [{ name: 'Profile' }],
});
返回
除了页面上方的返回页面,你还能为按钮添加goBack()
<Button title="Go back" onPress={() => navigation.goBack()} />
返回第一个页面
<Button title="Go back" onPress={() => navigation.popToTop()} />
跳转页面传值
-
将参数放入对象作为navigation.navigate函数的第二个参数，将参数传递给路线：
navigation.navigate('RouteName', { /* params go here */ }) -
获取参数：
route.params。 -
注意: 参数是JSON可序列化的
function HomeScreen({navigation} ) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
</View>
);
};
function DetailsScreen({route,navigation}) {
const { itemId } = route.params;
const { otherParam } = route.params;
<Text>itemId:{JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
}
可以使用 initialParams为页面添加一个初始参数
<Stack.Screen
name="Details"
component={DetailsScreen}
initialParams={{ itemId: 42 }}
/>
更改路由参数
使用setParams更改传递过来的数据
function ProfileScreen({route, navigation }) {
render() {
return (
<Button
onPress={() =>
navigation.setParams({
friends:
route.params.friends[0] === 'Brent'
? ['Wojciech', 'Szymon', 'Jakub']
: ['Brent', 'Satya', 'Michaś'],
title:
route.params.title === "Brent's Profile"
? "Lucy's Profile"
: "Brent's Profile",
})
}
title="Swap title and friends"
/>
);
}
}
useState
useState