React native 多页应用程序-使用本机基响应本机_React Native_Native Base

React native 多页应用程序-使用本机基响应本机

react-native

React native 多页应用程序-使用本机基响应本机,react-native,native-base,React Native,Native Base,我第一次尝试使用react native开发任何类型的应用程序。我正在使用本机基本组件/样式。我已经设法得到了一个非常基本的页面，但我正在努力解决如何从这个页面移动到一个页面，当从页脚点击时，它会移动到不同的页面 import React, { Component } from 'react'; import { Navigator, Container, Content, Header, Title, Button, Left, Right, Body, Icon, Footer, Foote

我第一次尝试使用react native开发任何类型的应用程序。我正在使用本机基本组件/样式。我已经设法得到了一个非常基本的页面，但我正在努力解决如何从这个页面移动到一个页面，当从页脚点击时，它会移动到不同的页面

import React, { Component } from 'react';
import { Navigator, Container, Content, Header, Title, Button, Left, Right, Body, Icon, Footer, FooterTab } from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class AwesomeNativeBase extends Component {
  render() {
    return (
      <Container>
          <Header>          
              <Body>
                  <Title>Kays Hairdressing</Title>
              </Body>
          </Header>
          <Content>
            <Grid>
                <Col style={{ backgroundColor: '#635DB7', height: 550 }}></Col>
                <Col style={{ backgroundColor: '#00CE9F', height: 550  }}></Col>
            </Grid>
          </Content>
          <Footer>
            <FooterTab>
                <Button>
                    <Text>Bookings</Text>
                    <Icon name="ios-book-outline" />
                </Button>
                <Button>
                    <Text>Blockout</Text>
                    <Icon name="ios-calendar-outline" />
                </Button>
            </FooterTab>
          </Footer>
      </Container>
    );
  }
}

AppRegistry.registerComponent('AwesomeNativeBase', () => AwesomeNativeBase);

import React，{Component}来自'React'；
从“本机基础”导入{Navigator、Container、Content、Header、Title、Button、Left、Right、Body、Icon、Footer、FooterTab}；
从“react native easy Grid”导入{Col，Row，Grid}；
进口{
评估学，
样式表，
文本，
看法
}从“反应本机”；
导出默认类AwesomeNativeBase扩展组件{
render（）{
返回(
凯斯美发
预订
封锁
);
}
}
AppRegistry.registerComponent（'AwesomeNativeBase'，（）=>AwesomeNativeBase）；

我已经确定需要使用“navigator”选项，但由于我不确定类在此设置中如何工作，因此无法使其正常工作。

您应该使用Tabs组件进行屏幕导航（使用tabBarPosition定义选项卡的位置），请参阅

我不知道为什么FooterTab仍然不支持屏幕导航。

使用导航库，如或

React-Navigation是一个基于JavaScript的选项，而React-native-Navigation是一个更原生的实现

尝试一下

我建议您阅读本机基本团队的代码。在该项目中，您可以从几个页面转换进行学习。