Можно ли определить глобальную оболочку (заголовок + нижний колонтитул) на react-native, используя response-navigation и nativebase

Я новичок в React-Native, React navigation и nativebase. Грубо говоря, я пытаюсь найти способ установить одинаковый верхний и нижний колонтитулы на каждом экране моего приложения. Заголовок содержит заголовок + значок входа. Нижний колонтитул содержит навигацию. Как правильно создать глобальный заголовок и глобальный нижний колонтитул для приложения?

Я попытался определить компонент-оболочку (MainStructure) и добавить {this.props.children} в контент, но каждый раз, когда нажимаю на нижний колонтитул, я получаю сообщение об ошибке на this.props.navigation. Из-за этой ошибки я попытался вручную добавить навигационные реквизиты в MainStructure, это не сработало. Я пробовал добавить HOC withNavigation, тоже безрезультатно.

Я попытался определить компонент заголовка и компонент нижнего колонтитула и добавить их повсюду в компоненте, но это некрасиво + это не работает по какой-то причине, которую я не понимаю.

Наконец, я попытался определить заголовок в navigationOptions и defaultNavigationOptions, это тоже не сработало.

это код приложения

const AppNavigator=createSwitchNavigator(
    {
        Home:Home,
        Search: Search,
        Account:Account,
        Login:Login
    },
    {
        initialRouteName:"Home",
    }
);
const AppContainer= createAppContainer(AppNavigator);

class App extends Component{


  render() {
    return (
        <MainStructure>
            <AppContainer/>
        </MainStructure>
    );
  }
}

export default App;

AppRegistry.registerComponent('Kioozi', ()=> App);

Вот код MainStructure

class MainStructure extends React.Component {
    constructor(props){
        super(props);
        Text.defaultProps.uppercase=false
    }
    render() {

        return (
            <StyleProvider style={getTheme(variables)}>
                <Container>
                    <Header>
                        <Left/>
                        <Body>
                            <Title>{I18n.t('homepage.title')}</Title>
                        </Body>
                        <Right>
                            <Button transparent onPress={()=> this.props.navigation.navigate('Login')}>
                                <Icon name={'login'} type={"Entypo"}/>
                            </Button>
                        </Right>
                    </Header>
                    <Content padder>
                        {this.props.children}
                    </Content>
                    <Footer>
                        <FooterTab>
                            <Button badge vertical onPress={()=> this.props.navigation.navigate('Home')}>
                                <Badge><Text>2</Text></Badge>
                                <Icon name={"home"} type={"Entypo"}/>
                                <Text>{I18n.t('footer.home')}</Text>
                            </Button>
                            <Button badge vertical onPress={()=> this.props.navigation.navigate('Search')}>
                                <Badge><Text>2</Text></Badge>
                                <Icon name={"magnify"} type={"MaterialCommunityIcons"}/>
                                <Text>{I18n.t('footer.search')}</Text>
                            </Button>
                            <Button badge vertical onPress={()=> this.props.navigation.navigate('Account')}>
                                <Badge><Text>2</Text></Badge>
                                <Icon name={"account-outline"} type={"MaterialCommunityIcons"}/>
                                <Text>{I18n.t('footer.myAccount')}</Text>
                            </Button>
                        </FooterTab>
                    </Footer>
                </Container>
            </StyleProvider>
        );
    }
}

export default MainStructure;

Я использовал createSwitchNavigator, так как хочу использовать bottomTab из nativebase, а не из реакции-навигации. Ожидаемый результат: всякий раз, когда я нажимаю вкладку, я получаю соответствующий экран с верхним и нижним колонтитулами.


react-native react-navigation native-base
person Le Gui PPF    schedule 16.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оберните <AppContainer />, как показано ниже, с импортированием Header и Footer из родной базы

<MainStructure>
  <View style={{flex:1}}>
    <Header>.....</Header>
    <AppContainer />

  <Footer>.....</Footer>
 </View>
</MainStructure>;
person Masuk Helal Anik    schedule 16.04.2019