Question

我是新的React和React Native。假设我有

   <View>
     <View>
       "Here there will be my functional components that will change dynamically based on routes"
     </View>
   </View>

如何实现这一目标。我探索了React Navigation，但没有得到。什么是实现此目的的理想方法？我也想使用Stack Navigator来实现。

Answer 1

您可以采用两种方法。 1.使用您提供的路线的名称并获取route.name并确定内容 2.传递初始参数，然后根据其确定内容。

以下代码显示了两种方法，您可以选择自己喜欢的任何方法。如果要在其中放入很多逻辑，则仍然具有单独的组件将是理想的方法。

function HomeScreen({route}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     {route.params.id==="Test1" && <Text>{route.params.id}</Text>}
      {route.name==="Home2" && <Text>"Home 2"</Text>}
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} initialParams={{id:"Test1"}}/>
        <Stack.Screen name="Home2" component={HomeScreen} initialParams={{id:"Test2"}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如何在React Native中动态更改父组件中的功能组件？

1 个答案: