reactjs - React Native 导航到特定帖子的 ID

Question

我想像使用react-router一样进行导航。 我正在获取 API 并将结果显示为卡片，当您单击卡片时，我需要它根据所选卡片导航到特定 ID。

<Route path='/item:id' component={item-details} />

然后在卡片上执行此操作。 <Link to='item/:id' > Card...</Link>

这就是你如何使用react-router-dom来做到这一点...我需要使用React Native来存档相同的内容。 有什么解决办法吗？

Answer 1

我建议使用react-navigation ，它是 RN 应用导航的最佳解决方案。它不太像 React Router，但 RN 需要不同的方法。在react-navigation中，您将屏幕声明为“导航器”，例如 stack navigator 。

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Screen1" component={Screen1Component} />
      <Stack.Screen name="Screen2" component={Screen2Component} />
    </Stack.Navigator>
  );
}

在每个屏幕上，都会传递一个 navigation 属性。它有很多属性和函数，但其​​中一个是名为 navigate 的函数，它会将您带到堆栈中的另一个屏幕。例如:

const Screen1Component = ({ navigation }) => (
  <View>
    // content 
    <TouchableOpacity onPress={() => navigation.navigate('Screen2) })>Go to Screen2</TouchableOpacity>
  </View>
)

navigate 还有第二个参数，称为 screen params 。这些是您导航时可以在屏幕之间传递的参数。它的使用方式类似于 navigation.navigate('Screen2, { id: '1234' })。

在你的 Screen2 组件中，会有一个 route 属性，你可以在其中选择该参数并使用它，例如:

const Screen2Component = ({ route, navigation }) => {
  const { id } = route.params
  // do something with it, call api, pass to redux action,etc

  return ...
}

希望有帮助。