react-native - 如何将道具从主屏幕传递到主屏幕的BottomTabBar屏幕？答案

【问题标题】：how to pass props from Home screen to BottomTabBar screen of home screen in react native?react-native - 如何将道具从主屏幕传递到主屏幕的BottomTabBar屏幕？
【发布时间】：2020-12-16 06:24:34
【问题描述】：

我有主屏幕 -> 下面是我在主屏幕内的底部标签栏。我想在导航时将道具从主屏幕传递到底部标签栏屏幕。

例如在上图中，如果我从下拉列表中选择一个项目 -> 我想将其作为导航道具传递给我底部标签栏上的咨询屏幕。

知道怎么做吗？任何线索都会很棒。

AppNavigation.js

export function BottomTabBar() {
  return (
    <Tab.Navigator
      lazy={false}
      initialRouteName="Home"
      tabBarOptions={{
        labelStyle: {
          color: '#FF1493',
          fontSize: 12,
        },
      }}>
    
      <Tab.Screen
        name="Home"
        // uncommnet below line to see new Home Tab
        component={HomeTabScreen}
        // uncomment below see old Home Tab
        // component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({color, size}) => (
            <MaterialIcon name="home" color="#FF1493" size={30} />
          ),
        }}
      />
      <Tab.Screen
        name="Consult"
        component={ConsultationHomeScreen}
        initialParams={{
          uri: 'some url',
        }}
        options={{
          tabBarLabel: 'Consult',
          tabBarIcon: ({color, size}) => (
            <FontAwesomeIcon name="stethoscope" color="#FF1493" size={30} />
          ),
        }}
      />
      <Tab.Screen
        name="Plans"
        component={PlansTabScreen}
        options={{
          tabBarLabel: 'Plans',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="crown-outline"
              color="#FF1493"
              size={30}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Chat"
        component={ChatTabScreen}
        options={{
          tabBarLabel: 'Chat',
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="chat-outline"
              color="#FF1493"
              size={30}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

function HomeMain() {
  return (
    <HomeMainStack.Navigator>
      <HomeMainStack.Screen
        name="drawer"
        component={HomeScreenNavigationDrawer}
        options={{headerShown: false}}
      />
      <HomeMainStack.Screen
        name="Homeb"
        component={BottomTabBar}
        options={{headerShown: false}}
      />
    </HomeMainStack.Navigator>
  );
}

function RootNavigator() {
  function LogoTitle(props) {
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          marginVertical: 10,
        }}>
        <Image
          style={{width: 31.44, height: 31.2}}
          source={Images.symptomcheck_bot1}
        />
        <Text
          style={{
            marginLeft: 10,
            color: '#FFFFFF',
            fontStyle: 'italic',
            fontSize: 14,
          }}>
          {props.children}
        </Text>
      </View>
    );
  }
  return (
    <RootStack.Navigator initialRouteName="Home">
      <RootStack.Screen
        name="Home"
        component={HomeMain}
        options={{headerShown: false}}
      />

      <RootStack.Screen
        name="online"
        component={OnlineConsultationWebviewScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="actual"
        component={ActualConsultationWebviewScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
      <RootStack.Screen
        name="vaccinelist"
        component={VaccinationListScreen}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Vaccination',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 18,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="vaccinationdetail"
        component={VaccinationDetailScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="carePlan"
        component={CarePlan}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Care Plan',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="carePlanDetailed"
        component={CarePlanDetailed}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Care Plan',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="vaccinereadmore"
        component={VaccinationDetailreadMoreScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="symptomChecker"
        component={SymptomChecker}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Symptom Checker',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerSearch"
        component={SymptomCheckerSearch}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerQA"
        component={SymptomCheckerQA}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="symptomCheckerAssessmentReport"
        component={symptomCheckerAssessmentReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Assessment Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="symptomCheckerDetailReport"
        component={SymptomCheckerDetailReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Detail Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -100 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="plactivityplanner"
        component={PLActivityPlanner}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="plactivityplannerdetail"
        component={PLActivityPlannerDetail}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="plactivityplannerreport"
        component={PLActivityPlannerReport}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="todaysgoal"
        component={TodaysGoalScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="mealdesc"
        component={MealDescriptionScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="nutritionassessment"
        component={NutritionAssessment}
        options={{
          // gesturesEnabled: false,
          // headerBackTitleVisible: false,
          // headerBackTitle: null,
          title: 'Nutrition Assessment',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 20,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="nutritionassessmentreport"
        component={NutritionAssessmentReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'NutriCheck',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 20,

            width: '100%',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />

      <RootStack.Screen
        name="lactation"
        component={LaSelectSymptoms}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="laQuestionAnswer"
        component={LaQuestionAnswer}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Hi! I’m ISHA, your health care assistant',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? 0 : 50,
          },
          headerTitle: (props) => <LogoTitle {...props} />,
        }}
      />
      <RootStack.Screen
        name="laSymptomCheckReport"
        component={LaSymptomCheckReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Assessment Report',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {},
        }}
      />
      <RootStack.Screen
        name="laSymptomCheckerDetailReport"
        component={LaSymptomCheckerDetailReport}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Lactation',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            // left: Platform.OS === 'ios' ? -70 : 50,
            // alignItems: 'center',
          },
        }}
      />
      <RootStack.Screen
        name="healthConditions"
        component={HealthConditions}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Health Conditions',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
            fontStyle: 'italic',
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
      <RootStack.Screen
        name="developmentscreening"
        component={DevelopmentScreeningInfo}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="dailyreadslisting"
        component={DailyReadsListingScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="login"
        component={LoginScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="otp"
        component={OtpScreen}
        options={{headerShown: false}}
      />
      <RootStack.Screen
        name="growthPattern"
        component={GrowthPattern}
        options={{
          gesturesEnabled: false,
          headerBackTitleVisible: false,
          headerBackTitle: null,
          title: 'Growth Pattern',
          headerStyle: {
            backgroundColor: '#FE017E',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '300',
            fontSize: 14,
          },
          headerTitleContainerStyle: {
            left: Platform.OS === 'ios' ? -70 : 50,
          },
        }}
      />
    </RootStack.Navigator>
  );
}

P.S：我想将道具从“家”传递给“咨询”

【问题讨论】：

请为您的主页和底部标签栏添加代码
如果您使用的是 redux/context api，这应该相当简单。
我现在还不是@SwarupBam，但你能简要介绍一下如何使用上下文api吗？
@AshwithSaldanha 添加了 appnavigation.js 代码
@TRINACHAUDHURI Redux/context 会将您的数据保存在一个位置。您不必通过组件道具传递数据。参考这个reactjs.org/docs/context.html

标签： react-native react-native-android react-navigation react-native-ios react-navigation-bottom-tab

【解决方案1】：

像这样使用 Context Api


export const HomeContext = createContext({
 value: initital value here
});

const Home = () => {
const [value, setValue] = useState(initial value)
  return (
    <HomeContext.Provoider value={{value}}>
     <BottomTabs />
    </HomeContext.Provoider>
  );
}

底部选项卡屏幕，您可以使用 useContext 访问上下文值

例如：假设你有搜索屏幕。然后在底部标签中


import {HomeContext} from './Home';

const Search = () => {

const {value} = useContext(HomeContext);

 return (
  <View>
    // UI
  </View>
 )
}

【讨论】：