如何使用 React Native 创建动态路由/屏幕？

Question

我想创建动态路由，类似于使用斜杠冒号使用 react-router 的方式：

<Route exact path="/user/:_id" component={UserPage} />

如果我想打开特定于 link 的页面，这如何与 React Native 一起工作？

const Item = ({ title }) => (
  <View style={styles.item}>
    <Button
      onPress={() => {
        alert(`You tapped ${title}`);
      }}
      title={title}
    >
      <Text style={styles.title}>{title}</Text>
    </Button>
  </View>
);

const MainPage = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Item title={item} />}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  </SafeAreaView>
);


export default MainPage;

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="MainPage" component={MainPage} />
        <Stack.Screen name="MediaScreen" component={MediaScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

我想让 Item onPress 转到它自己的 page/screen

Answer 1

至于我知道react native navigation是不允许url参数的，调用navigate函数时必须传参

const Item = ({ title, navigation }) => (
  <View style={styles.item}>
    <Button
      onPress={() => {
        alert(`You tapped ${title}`);
        navigation.navigate('Details', { _id })
      }}
      title={title}
    >
      <Text style={styles.title}>{title}</Text>
    </Button>
  </View>
);

const MainPage = ({ navigation }) => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Item title={item} navigation={navigation}/>}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  </SafeAreaView>
);


export default MainPage;

然后在详细信息中它将有一个路由参数，您可以从 route.params._id

中获取 _id

const Details = ({ navigation, route }) => {
    const [_id] = useState(route.params._id);
    return (
        <></>
    )
};

Answer 2

使用 react-navigation 可以通过两种方式传递参数：

1 - 通过将参数放入对象中作为 navigation.navigate 函数的第二个参数将参数传递给路由：navigation.navigate('RouteName', { /* params go here */ })

2 - 读取屏幕组件中的参数：route.params.

完整文档https://reactnavigation.org/docs/params

如何使用 React Native 创建动态路由/屏幕？

How can I create dynamic routes/ screens with React Native?

reactjs

react-native

mobile

routes

native