是否可以使用 react-navigation 和 nativebase 在 react-native 上定义全局（页眉 + 页脚）包装器答案

【问题标题】：Is it possible to define a global (header + footer) wrapper on react-native using react-navigation and nativebase是否可以使用 react-navigation 和 nativebase 在 react-native 上定义全局（页眉 + 页脚）包装器
【发布时间】：2019-09-06 04:33:24
【问题描述】：

我对 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 而不是来自 react-navigation 的 bottomTab。预期结果：每当我按下一个选项卡时，我都会看到带有页眉和页脚的相关屏幕。

【问题讨论】：

标签： react-native react-navigation native-base

【解决方案1】：

通过从 nativebase 导入 Header 和 Footer 来包装 <AppContainer />，如下所示

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

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

【讨论】：