文章/答案/技术大牛

发布

社区首页 >问答首页 >React Native 5导航参数

问React Native 5导航参数
EN

Stack Overflow用户

提问于 2021-02-15 13:14:12

回答 2查看 64关注 0票数 0

我是按照文档导航的

我做了2页第一页登录页与一个登录按钮，发送参数用户名到下一页，这是主页

export default function LoginScreen({navigation}) {
    const [username,setUsername] = useState('loginwithusername')
    const [password,setPassword] = useState('')

    function Login(){
        navigation.navigate('HomeScreen', {
                itemId: 86,
                 otherParam: username,
        });
    }

这是在第二页，主页上有一个按钮，它应该是参数，但根据文档，我得到了错误

export default function HomeScreen({ route, navigation }) {

    function button01(){
        console.log(navigation)
        console.log(route)
    }

所以我先写这些，然后我从console.log(路由)得到的是

Object {
  "key": "Home-Xb5s",
  "name": "Home",
  "params": undefined,
}

我该如何从中获取参数呢？

这是堆栈导航组件

export default function App() {


function onPressLogo(){
    alert('Vae')
}

  return (
<SafeAreaProvider>
        <Provider store = {store}>
          <AppearanceProvider>
           <NavigationContainer theme={scheme === 'dark' ? DefaultTheme : DefaultTheme}>
              <Stack.Navigator initialRouteName='Tab1Screen'
                screenOptions={{
                  headerShown: true,
                  headerLeft: null
                }}
              >
                <Stack.Screen name="LoginScreen" component={LoginScreen} 
                  options={{
                    headerTitle:(props)=>(
                    <TouchableHighlight onPress={() => onPressLogo()}>
                    <Image
                      style={{ width:Dimensions.get('window').width/5 , height:Dimensions.get('window').height, }}
                      source={require('./assets/images/vae200.png')}
                      resizeMode='contain'
                    />
                    </TouchableHighlight>
                    ),
                    headerTitleStyle: { flex: 1, textAlign: 'center' },
                    headerStyle: {
                        backgroundColor: Theme.colorTopTab.color,
                    },
                    headerTintColor: '#fff',
                  }}
                />

                <Stack.Screen name="HomeScreen" component={BottomTabNavigator1}
                  options={{
                    headerTitle:(props)=>(
                    <Image
                      style={{ width:Dimensions.get('window').width/5, height:Dimensions.get('window').height, }}
                      source={require('./assets/images/vae200.png')}
                      resizeMode='contain'
                    />
                    ),
                    headerTitleStyle: { flex: 1, textAlign: 'center' },
                    headerStyle: {
                    backgroundColor: Theme.colorTopTab.color,
                    },
                    headerTintColor: '#fff',
                  }}
                />
              </Stack.Navigator>
            </NavigationContainer>
          </AppearanceProvider>
        </Provider>
    <StatusBar />
</SafeAreaProvider>
  );
}




function BottomTabNavigator1() {
  return (
    <Tabs.Navigator
        tabBarOptions={
            {
                activeTintColor: Theme.iconColorBottomTab.color,
                inactiveTintColor: "red",
                activeBackgroundColor : Theme.activeColorBottomTab.color
            }
        }
        apperance={
            {
                whenInactiveShow : "both"
            }
        }
    >

        <Tabs.Screen name="Home" component={HomeScreen}
        options={
            {
                tabBarIcon: ({ focused, color, size }) => (
                    <Icon
                        name="home"
                        size={Theme.fontBottomTab.fontSize}
                        focused={focused}
                        color={Theme.iconColorBottomTab.color}
                    />
                )

            }
        }/>
        <Tabs.Screen name="default0" component={DefaultScreen}
        options={
            {
                tabBarIcon: ({ focused, color, size }) => (
                    <AntDesign
                        name="bars"
                        size={Theme.fontBottomTab.fontSize}
                        focused={focused}
                        color={Theme.iconColorBottomTab.color}
                    />
                )
            }
        }/>
        <Tabs.Screen name="default1" component={DefaultScreen1}
        options={
            {
                tabBarIcon: ({ focused, color, size }) => (
                    <AntDesign
                      name="barschart"
                      size={Theme.fontBottomTab.fontSize}
                      focused={focused}
                      color={Theme.iconColorBottomTab.color}
                    />
                )
            }
        }/>
    </Tabs.Navigator>
  )
}

react-native

react-navigation

reactjs

回答 2

Stack Overflow用户

发布于 2021-02-15 15:24:49

请创建一个名为navigator的新文件，以及如何将Tab导航器与Stack导航器一起使用：

const HomeStack = createStackNavigator();
const AnotherStack = createStackNavigator();

const HomeStackNavigator = ({ navigation }) => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="LoginScreen"
        component={LoginScreen}
      />
      <HomeStack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
    </HomeStack.Navigator>
  );
};

const AnotherStackNavigator = ({ navigation }) => {
  return (
    <AnotherStack.Navigator>
      <AnotherStack.Screen
        name="AnotherScreen"
        component={AnotherScreen}
      />
    </AnotherStack.Navigator>
  );
};

这是Tab Navigator

const Tab = createMaterialBottomTabNavigator();

const MainTabScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="HomeStackNavigator"
        component={HomeStackNavigator}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcon name="home" color={color} size={26} />
          ),
        }}
      />
     <Tab.Screen
        name="AnotherStack"
        component={AnotherStackNavigator}
        options={{
          tabBarLabel: 'Another Tab',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcon name="home" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

然后我们需要导出tab nav，以便在主js文件中的导航容器下使用它：

export default function mainNav() {
  return <MainTabScreen />;
}

现在，当您在选项卡屏幕中时，您可以使用屏幕名称从一个屏幕导航到另一个屏幕，如果您想导航到另一个选项卡屏幕，则应使用以下方式导航：

navigation.navigate('HomeStackNavigator',
{
        screen: 'HomeScreen',
        params: { id: 123},
      });

如果您在相同的选项卡屏幕中，请使用与您相同的方式：

navigation.navigate('HomeScreen', 
    {id: 123} //this is the params
);

您可以使用以下命令访问参数：

route.params?.id // "?" is to check if the params is undefined to avoid throwing an error

希望这能对你有所帮助

票数 1

Stack Overflow用户

发布于 2021-02-15 14:44:38

当您使用嵌套导航器时，您可以使用dangerouslyGetParent获取参数。

您需要多次使用它，因为将接收参数的导航器嵌套得很深。

navigation.dangerouslyGetParent().getParam('your_param')

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66203028

复制

相似问题

问React Native 5导航参数
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React Native 5导航参数EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React Native 5导航参数
EN