快捷導(dǎo)航

React Navigation 路由傳參的操作代碼

更新時(shí)間：2023年08月29日 10:15:08 作者：林中白虎

這篇文章主要介紹了React Navigation 路由傳參,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

頁(yè)面之間傳遞參數(shù)

實(shí)現(xiàn)頁(yè)面之間傳遞參數(shù)很簡(jiǎn)單，跟普通的 React 項(xiàng)目一樣，具體實(shí)例入戲：

// 傳入?yún)?shù)
export default function Home(props: { navigation: any }) {
  return (
    <View>
      <Text>Home</Text>
      <Button
        title="切換到詳情頁(yè)"
        onPress={() =>
          props.navigation.navigate("Detail Page", {
            itemId: 86,
            otherParam: "這是傳遞過來的參數(shù)",
          })
        }
      />
    </View>
  );
}
// 獲取參數(shù)
export default function ReviewDetails(props: {
  navigation: any;
  route: { params: { itemId: number; otherParam: string } };
}) {
  return (
    <View>
      <Text>詳情頁(yè)</Text>
      <Text>itemId: {props.route.params.itemId}</Text>
      <Text>otherParam: {props.route.params.otherParam}</Text>
      <Button
        title="切換到詳情頁(yè)"
        onPress={() => props.navigation.push("Detail Page")}
      />
      <Button
        title="返回上一頁(yè)"
        onPress={() => props.navigation.goBack()}
      ></Button>
      <Button
        title="清除所有堆棧信息返回首頁(yè)"
        onPress={() => props.navigation.popToTop()}
      ></Button>
    </View>
  );
}

通過上述的例子可以看出我們實(shí)現(xiàn)參數(shù)的傳遞與獲取只需要兩部：

通過將參數(shù)放入對(duì)象中作為函數(shù)的第二個(gè)參數(shù)來將參數(shù)傳遞給路由 navigation.navigate('RouteName', { 參數(shù) })
讀取屏幕組件中的參數(shù)： route.params

傳遞初始參數(shù)

您可以將一些初始參數(shù)傳遞給屏幕，如果您在導(dǎo)航到此屏幕時(shí)未指定任何參數(shù)，則將使用初始參數(shù)。它們也與您傳遞的任何參數(shù)淺層合并。初始化參數(shù)可以在 Stack.Screen 組件中使用 initialParams 屬性來實(shí)現(xiàn)。具體實(shí)例如下：

<Stack.Screen
  name="Detail Page"
  component={ReviewDetails}
  initialParams={{ itemId: 42 }}
/>

參數(shù)傳遞給上一級(jí)路由

參數(shù)不僅對(duì)于將一些數(shù)據(jù)傳遞到新屏幕有用，而且對(duì)于將數(shù)據(jù)傳遞到前一個(gè)屏幕也很有用。具體實(shí)例如下：

// 首頁(yè)（接收創(chuàng)建文章頁(yè)面回傳回來的數(shù)據(jù)）
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 }}>
        添加文章頁(yè)面?zhèn)骰氐膮?shù): {props.route.params?.post}
      </Text>
      <Button
        title="切換到詳情頁(yè)"
        onPress={() =>
          props.navigation.navigate("Detail Page", {
            itemId: 86,
            otherParam: "這是傳遞過來的參數(shù)",
          })
        }
      />
      <Button
        title="添加文章"
        onPress={() => props.navigation.navigate("CreateArticle")}
      ></Button>
    </View>
  );
}
// 創(chuàng)建文章
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>
  );
}

通過上述的例子我們可以看到要把參數(shù)傳遞給上一級(jí)路由的方法跟我們普通傳遞參數(shù)的方法是一樣的。

到此這篇關(guān)于React Navigation 路由傳參的文章就介紹到這了,更多相關(guān)React 路由傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: