我正在使用“没有导航道具的导航”按照官方文档
但我收到警告 You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator. Full details at: https://reactnavigation.org/docs/common-mistakes.html#explicitly-rendering-more-than-one-navigator
我觉得 doc 有冲突 那么，我该如何解决这个问题？
"react-navigation": "^2.11.2更新代码
这是我的TabNavigator内心StackNavigator
const HomeTabNavigator = createBottomTabNavigator(
{
CourseView: {
screen: CourseView,
},
NotificationView: {
screen: NotificationView,
},
SettingTab: {
screen: SettingView,
},
},
{
tabBarOptions: {
activeTintColor: SECONDARY_COLOR,
inactiveTintColor: PRIMARY_COLOR,
showIcon: true,
style: {
backgroundColor: "#fff",
},
labelStyle: {
display: "none"
}
},
animationEnabled: true,
tabBarPosition: "bottom",
backBehavior: "initialRoute",
lazy: true,
})
这是我MainStackNavigator需要为 TabNavigator 分配“没有导航道具的导航”（此处显示警告）
const StackNavigator = createStackNavigator(
{
HomeTabNavigator: {
//I used "Navigating without navigation prop" here
screen: ({ navigation, screenProps }) => <HomeTabNavigator ref={ref => SignedInTabService.setNavigator(ref)} />,
// screen: HomeTabNavigator, Uncomment this won't show warning 'You should render.....'
navigationOptions: { header: null }
},
NavCourseDetail: {
screen: NavCourseDetail,
},
},
{
initialRouteName: "HomeTabNavigator",
navigationOptions: {
headerTintColor: "white",
headerStyle: { backgroundColor: PRIMARY_COLOR },
headerBackTitle: null
}
})
这是我的AppNavigator，也分配“没有导航道具的导航”（警告显示在这里）
class SignedInNavigator extends React.Component {
settingStackRef = ref => {
SignedInNavigatorService.setNavigator(ref)
}
render = () => {
let x = HomeTabNavigator
return (
<View style={{ flex: 1 }}>
//FCMHandle is Firebase
<FCMHandle {...this.props} />
//I used "Navigating without navigation prop" here, too
<StackNavigator ref={this.settingStackRef} screenProps={{ numberNotif: this.props.numberNotif }} />
</View>
)
}
}
const mapStateToProps = state => {
let numberNotif = state.auth.numberNotif
return { numberNotif: numberNotif }
}
export default connect(mapStateToProps)(SignedInNavigator)
在 react-navigation 文档中，他们说你应该只直接嵌套你的导航器。
这意味着如果您希望导航器正确处理它们的嵌套状态和操作，您应该只像这样嵌套导航器：
createStackNavigator({
HomeTabNavigator: {
screen: HomeTabNavigator,
navigationOptions: { header: null },
},
NavCourseDetail: {
screen: NavCourseDetail,
},
})
如果您按如下方式嵌套导航器
{
HomeTabNavigator: { screen: () => <Navigator/> }
}
它们不是直接嵌套的，不能互相访问。
也不需要将它们直接嵌套在您的案例中。您可能应该在根级导航器上使用“无导航道具导航”技术，并让其处理其子级导航状态。
const App = () => (
<RootNavigator ref={NavigationService.setNavigator}/>
)
NavigationService.dispatch(NavigationActions.navigate('SomeNestedRoute'))
这应该可以正常工作，而且我现在真的没有理由在嵌套导航器上使用它。
本质上，只有您的根导航器应该使用 JSX 呈现（如果您使用 JSX 呈现多个导航器，这是您没有正确嵌套它们的一个很好的指标）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句