如何在使用堆栈导航器博览会时传递屏幕道具



我试图将参数传递到我拥有的所有 3 个窗口的选项卡中。我只是不知道要在这里放置ScreenProps,以及这是否是将参数发送到 3 个类的正确方法。参数是否也需要在此类中传递,或者当我在登录后导航到选项卡时this.props.navigation.navigate('Main',{name: "1"})现在只是尝试传递名称 1 以在所有选项卡中获取它

import React from 'react';
import { Platform} from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import Profile from '../screens/ProfileToUse';

const HomeStack = createStackNavigator({
 Home: HomeScreen,
});
HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
     focused={focused}
     name={
       Platform.OS === 'ios'
        ? `ios-information-circle${focused ? '' : '-outline'}`
        : 'md-information-circle'
    }
  /> 
 )
};
const LinksStack = createStackNavigator({
  Links: LinksScreen,
 });
LinksStack.navigationOptions = {
  tabBarLabel: 'Contacts',
  tabBarIcon: ({ focused }) => (
     <TabBarIcon
      focused={focused}
       name={Platform.OS === 'ios' ? `ios-link${focused ? '' : '-outline'}` : 'md-link'}
     />
   ),
 };
  const ProfileStack = createStackNavigator({
    Profile: Profile,
  });
 ProfileStack.navigationOptions = {
  tabBarLabel: 'Profile',
  tabBarIcon: ({ focused }) => (
     <TabBarIcon
     focused={focused}
     name={Platform.OS === 'ios' ? `ios-options${focused ? '' : '-outline'}` : 'md-profile'}
     />
   ),
 };

export default createBottomTabNavigator({
HomeStack,
LinksStack,
ProfileStack,
},
{
  tabBarOptions: {
    showLabel: true,
    activeTintColor: '#F8F8F8',
    inactiveTintColor: '#586589',
    style: {
     backgroundColor: '#273746'
   },
    tabStyle: {}
  }
},

);

一次只能将屏幕道具传递到一个屏幕,在第一个屏幕中调用this.props.navigation.navigate('Main',{name: "1"}),并在 ond componentDidMount(( 调用var p = this.props.navigation.getParam('name'||'No name')

您可能希望使用一些库来避免这种情况,例如 Redux 或 https://github.com/vonovak/react-navigation-props-mapper ,甚至是 reactn。

相关内容

  • 没有找到相关文章

最新更新