React Native - 平台无关的选项卡导航方法

React Native - Platform-Independent Tab Navigation Method

我学习了一个应用有趣的 Tabs Navigation 的教程,基本上它安装和使用 react-native-tabs npm 并允许 React Native 应用程序使用 Tab 在 Android 和 IOS 平台中可以是 运行 的组件。

教程Link的应用很简单,标签就像一个按钮一样简单,可以改变页面本身的Text内容。

我一直在寻找使用此 react-native-tabs npm 将来自其他 Javascript 文件的屏幕插入选项卡的方法,但没有与此相关的方法。

我的问题:

是不是这个react-native-tabs npm 有不能在选项卡中指定另一个 JaveScript 文件屏幕的限制?

任何人都可以告诉我如何使用 react-native-tabs npm 指定选项卡以显示来自其他 Javascript 文件的特定屏幕?谢谢。

教程Link:https://differential.com/insights/sharing-code-between-android-and-ios-in-react-native/

import Tabs from 'react-native-tabs';

class ApplicationTabs extends Component{

  constructor(props) {
      super(props);

      this.state = {
        page: 'first'
      };
    }

  render() {
    const { page } = this.state;
    const tabbarStyles = [styles.tabbar];
    if (Platform.OS === 'android') tabbarStyles.push(styles.androidTabbar);

    return (
      <View style={styles.container}>
        <Tabs
          selected={page}
          style={tabbarStyles}
          selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}
        >
            <Text name="first">First</Text>
            <Text name="second">Second</Text>
            <Text name="third">Third</Text>
        </Tabs>

        <Text>CodeSharing App</Text>
        <Text>{page}</Text>
      </View>
    )
  }


}

屏幕输出(选项卡导航仅导航到更改屏幕上的文本)

react-native-tabs npm 可能不适合我。相反,我使用了 react-navigation npm,结果工作正常。唯一的问题是到目前为止我只能实现 StackNavigation。

Github: https://github.com/slnn3r/RecipeRedux.git

上面的项目:

  • 正在使用 Redux 架构
  • 使用 PHP mySQL 数据库
  • 使用堆栈导航