Можно ли определить глобальную (заголовок + нижний колонтитул) оболочку на реактивном-родном, используя реагирующую навигацию и нативную базу - PullRequest
Новая
       13

Можно ли определить глобальную (заголовок + нижний колонтитул) оболочку на реактивном-родном, используя реагирующую навигацию и нативную базу

0 голосов
/ 16 апреля 2019

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

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

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

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

1 Ответ

0 голосов
/ 16 апреля 2019

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

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

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