首页 文章

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

提问于
浏览 次
1

我已经来了一个教程来应用一个有趣的Tabs导航，基本上它安装并使用 react-native-tabs npm并允许React Native Application使用可以在Android和IOS平台上运行的Tab组件 .

Tutorial Link的应用很简单，Tab就像Button一样简单，可以更改Page本身的 Text 内容 .

我一直在寻找方法使用这个 react-native-tabs npm将一个屏幕从其他Javascript文件插入到Tab中，但没有方法可以考虑到这一点 .

My Issue:

这是 react-native-tabs npm有限制，无法在标签中指定另一个JaveScript文件屏幕吗？

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

教程链接：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>
    )
  }


}

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

android react-native tabs react-native-android react-navigation

1 回答

  • 0

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

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

    The Project above:

    • 正在使用Redux架构

    • 使用PHP mySQL数据库

    • 使用堆栈导航

    回复于

相关问题