Question

我使用的是“不使用导航道具进行导航”，请遵循offical doc

但是我得到警告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

我感觉文档冲突那么，我该如何解决呢？

`"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)

Answer 1

在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渲染多个导航器，则表明您没有正确嵌套它们）。

[React-Navigation]如何在没有“警告导航”的情况下进行“导航”而没有警告“您只能在应用程序中显式呈现一个导航器...”

`"react-navigation": "^2.11.2`

1 个答案: