react-native - react-native - 如何将道具从主屏幕传递到主屏幕的BottomTabBar屏幕?
问题描述
我有主屏幕-> 下面是我在主屏幕内的底部标签栏。我想在导航时将道具从主屏幕传递到底部标签栏屏幕。
例如,在上图中,如果我从下拉列表中选择一个项目 - > 我想将其作为导航道具传递给我底部标签栏上的咨询屏幕。
知道怎么做吗?任何线索都会很棒。
应用导航.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>
);
}
PS:我想将道具从“家”传递到“咨询”
解决方案
像这样使用 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>
)
}
推荐阅读
- azure-devops - 如何将 PublishPipelineArtifact@1 与构建脚本一起使用
- highcharts - Highcharts Tooltip 无法正确显示 utf-8
- html - Bootstrap 4 导航栏不会在平板电脑上折叠
- node.js - 带有 NextJS 的 ASP.NET Core 项目
- r - 如何根据一年中的某一天 (DOY) 对多列进行 R 中的每日总和?
- javascript - 不同的活动
- google-bigquery - 如何在 BIGQUERY 中实现 GETBIT 功能
- python - 在列表列表中找到特定列表的次数
- python - Pyspark:根据条件在列的所有值中添加零作为前缀
- javascript - 我的 React App 功能无法在手机上运行