ページ間でパラメータを渡す
通常の React プロジェクトと同様に、ページ間でパラメータを転送するのは非常に簡単です。具体的な例を次に示します。
// 传入参数
export default function Home(props: {
navigation: any }) {
return (
<View>
<Text>Home</Text>
<Button
title="切换到详情页"
onPress={
() =>
props.navigation.navigate("Detail Page", {
itemId: 86,
otherParam: "这是传递过来的参数",
})
}
/>
</View>
);
}
// 获取参数
export default function ReviewDetails(props: {
navigation: any;
route: {
params: {
itemId: number; otherParam: string } };
}) {
return (
<View>
<Text>详情页</Text>
<Text>itemId: {
props.route.params.itemId}</Text>
<Text>otherParam: {
props.route.params.otherParam}</Text>
<Button
title="切换到详情页"
onPress={
() => props.navigation.push("Detail Page")}
/>
<Button
title="返回上一页"
onPress={
() => props.navigation.goBack()}
></Button>
<Button
title="清除所有堆栈信息返回首页"
onPress={
() => props.navigation.popToTop()}
></Button>
</View>
);
}
上記の例から、パラメーターの送信と取得を実現するには 2 つのステップだけが必要であることがわかります。
- パラメータを関数の 2 番目のパラメータとしてオブジェクトに入れることで、ルートにパラメータを渡します。
navigation.navigate('RouteName', { 参数 }) - 画面コンポーネントのパラメータを読み取ります。
route.params
初期パラメータを渡す
いくつかの初期パラメータを画面に渡すことができます。この画面に移動するときにパラメータを指定しない場合は、初期パラメータが使用されます。また、渡した引数とも浅くマージされます。初期化パラメータは、 Stack.Screen コンポーネントのinitialParamsプロパティを使用して実装できます。具体的な例としては以下のようなものがあります。
<Stack.Screen
name="Detail Page"
component={
ReviewDetails}
initialParams={
{
itemId: 42 }}
/>
パラメータは上位のルートに渡されます
パラメータは、新しい画面にデータを渡すだけでなく、前の画面にデータを渡す場合にも役立ちます。具体的な例としては以下のようなものがあります。
// 首页（接收创建文章页面回传回来的数据）
export default function Home(props: {
navigation: any; route: any }) {
React.useEffect(() => {
if (props.route.params?.post) {
console.log(props.route.params?.post);
}
}, [props.route.params?.post]);
return (
<View>
<Text>Home</Text>
<Text style={
{
margin: 10 }}>
添加文章页面传回的参数: {
props.route.params?.post}
</Text>
<Button
title="切换到详情页"
onPress={
() =>
props.navigation.navigate("Detail Page", {
itemId: 86,
otherParam: "这是传递过来的参数",
})
}
/>
<Button
title="添加文章"
onPress={
() => props.navigation.navigate("CreateArticle")}
></Button>
</View>
);
}
// 创建文章
export default function CreateArticle(props: {
navigation: any; route: any }) {
const [postText, setPostText] = React.useState("");
return (
<View>
<TextInput
multiline
placeholder="What's on your mind?"
style={
{
height: 200, padding: 10, backgroundColor: "white" }}
value={
postText}
onChangeText={
setPostText}
/>
<Button
title="完成"
onPress={
() => {
props.navigation.navigate({
name: "Home Page",
params: {
post: postText },
merge: true,
});
}}
/>
</View>
);
}
上記の例から、上位レベルのルーティングにパラメータを渡す方法は、パラメータを渡す通常の方法と同じであることがわかります。