Блог

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

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

#react-native #react-navigation #native-base

#react-native #react-navigation #native-base

Вопрос:

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

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

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

Наконец, я попытался определить заголовок в 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);

Вот основной структурный код

 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, поскольку я хочу использовать нижнюю вкладку из nativebase, а не из react-navigation.
Ожидаемый результат: всякий раз, когда я нажимаю вкладку, я получаю соответствующий экран с верхним и нижним колонтитулами.

Ответ №1:

Оберните <AppContainer /> подобное ниже с помощью импорта Header и Footer из nativebase

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

  <Footer>.....</Footer>
 </View>
</MainStructure>;