Реактив-родной и экспо: реагировать на навигационную панель навигации не будет отображаться - PullRequest
Новая
       33

Реактив-родной и экспо: реагировать на навигационную панель навигации не будет отображаться

0 голосов
/ 20 февраля 2019

Я использую Switch Navigator для своего собственного выставочного проекта, и навигация, кажется, работает, но я получаю сообщение об ошибке каждый раз, когда пытаюсь перейти, нажимая кнопку.Я получаю следующую ошибку:

Инвариантное нарушение: для этой навигации отсутствует навигационная опора.В реакции-навигации 3 вы должны настроить контейнер приложения напрямую.Дополнительная информация: https://reactnavigation.org/docs/en/app-containers.html

В настоящее время я придерживаюсь подхода, изложенного в этой статье, https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html.

Как мне следовать инструкциям для навигации без навигационной стойки ичто указано в ссылке app-container.html?Кажется, они конфликтуют друг с другом. 

AppContainer.js:
class CompanyNavWrapper extends Component {
    constructor(props){
        super(props);
    }

    render(){
        return (
            <CompanyNavigator screenProps={{ rootNavigation: this.props.navigation}} />
        )
    }
}
const CompanyNavigator = createStackNavigator({
        CompanyList: {
            screen: CompanyList,
            navigationOptions: ({ navigation }) => ({
                title: "Companies"
            })
        },
        PartnershipEdit: {
            screen: PartnershipEdit,
            navigationOptions: ({ navigation }) => ({
                title: "Partnership Edit",
                headerMode: 'screen'
            })
        }
    },
    {
        headerMode: 'screen'
    }
);

export const SignInNavigator = createDrawerNavigator({
        Menu: {
            screen: Menu,
            navigationOptions: {
                title: "Menu",
            }
        },
        PartnershipList: {
            screen: PartnershipList,
            navigationOptions: ({ navigation }) => ({
                title: "Partnerships",
                headerLeft: <Icon name="three-bars" size={35} onPress={ () => navigation.navigate('DrawerOpen') } />
            })
        },
        Company: {
            screen: CompanyNavWrapper,
            navigationOptions:{
                title:'Companies'
            }
        }
    }, {
        contentComponent:(props) => (
            <View style={{flex:1}}>
                <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                    <DrawerItems {...props} />
                    <TouchableHighlight onPress={async () => {
                        await deleteUser();
                        NavigationService.navigate('Auth');
                    }} underlayColor='#ffffff'>
                        <Text style={{marginLeft: 15, marginTop: 10, color: '#000000', fontWeight: 'bold', backgroundColor: '#ffffff'}}>Logout</Text>
                    </TouchableHighlight>
                </SafeAreaView>
            </View>
        ),
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle'
    },{
        headerMode: 'float',
        navigationOptions: ({ navigation }) => ({
            headerLeft: <Icon name="three-bars" size={35} onPress={ () => navigation.navigate('DrawerOpen') } />,
        })
    }
);

export const mainNav = createStackNavigator({
        DrawerStack: { screen: SignInNavigator }
    },
    {
        headerMode: 'float',
        navigationOptions: ({navigation}) => ({
            headerLeft: <Icon name="three-bars" size={18} style={{paddingLeft: 10}} onPress={ () => { navigation.state.index == 0 ? navigation.navigate('DrawerOpen') : navigation.navigate('DrawerClose') } } />,
            headerStyle: { backgroundColor: '#ffffff', height: 20 },
            headerTitleStyle: {
                color: '#000000',
                textAlign: 'center',
                alignSelf: 'center',
                flex: 0.85
            },
            headerRight: <View/>
        })
    }
)

export const SignedOutNavigator = createStackNavigator(
    {
        Login: { screen: Login },
        Register: { screen: Register },
        ForgotPassword: {screen: ForgotPassword },
        ForgotPasswordReset: {screen: ForgotPasswordReset }
    },
    {
        headerMode: 'none',
        cardStyle: { backgroundColor: 'transparent' }
    }
);

export const AppNavigator = createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: mainNav,
        Auth: SignedOutNavigator
    },
    {
        initialRouteName: 'AuthLoading',
    }
);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;



app.js:  
render() {
  if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={this._loadResourcesAsync}
        onError={this._handleLoadingError}
        onFinish={this._handleFinishLoading}
      />
    );
  } else {
    return (
      <View style={styles.container}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <Provider store={store}>
              <AlertProvider>
                  <AppContainer
                      ref={navigatorRef => {
                          NavigationService.setTopLevelNavigator(navigatorRef);
                      }}
                  />
              </AlertProvider>
          </Provider>
      </View>
    );
  }
}
...