React Native：TabBarIOS和导航

Question

我有3个标签的简单应用。 选项卡由index.ios中的TabBarIOS定义。 我没有使用Navigator或NavigatorIOS。 在每个TabBarItem中，我只是将组件名称放在标签中。 像这样 ：

return(
        <TabBarIOS
        selectedTab={this.state.selectedTab}
        //unselectedTintColor="yellow"
        //tintColor="white"
        //barTintColor="darkslateblue"
        >

        <TabBarIOS.Item
        icon={{uri: 'courses.png', scale: 5}}
        title="Courses"
        badge={undefined}
        selected={this.state.selectedTab === 'courses'}
        onPress={() => {
          this.setState({
            selectedTab: 'courses',
          });
        }}>
        <Courses />
        </TabBarIOS.Item>

        <TabBarIOS.Item
        icon={{uri: 'register.png', scale: 5}}
        title="Register"
        badge={undefined}
        selected={this.state.selectedTab === 'register'}
        onPress={() => {
          this.setState({
            selectedTab: 'register',
          });
        }}>
        <NavigatorIOS
          //style={styles.nav}
          initialRoute={{
            title : 'Register',
            component: Register
          }}
        />
        </TabBarIOS.Item>

        <TabBarIOS.Item
        icon={{uri: 'profile.png', scale: 5}}
        title="Profile"
        badge={undefined}
        selected={this.state.selectedTab === 'profile'}
        onPress={() => {
          this.setState({
            selectedTab: 'profile',
          });
        }}>
        <Profile />
        </TabBarIOS.Item>


        </TabBarIOS>
      );

如果您在代码中看到，则在第一个和第三个选项卡中，我通过将组件名称放在诸如

<Courses />

但是对于第二项，我尝试使用navigatorios显示组件，但它仅显示带有标题的空白页面。 它不显示组件的内容。 我看到很多例子都可以这样工作，但对我却没有用。 也许是因为我没有为index.ios使用navigator或navigaatorios，因为在我看到的大多数示例中，他们都将navigatorios用作索引并设置了initialroute。 我尝试过，但是对我没有用。

到这里一切都很好。 在“课程”页面中，我有一个列表视图，下面有项目（实际上是带有标题的项目，这些项目是可折叠的），当用户单击每个项目时，我需要将用户重定向到页面以显示该课程的详细信息。 （我也应该通过一些论点）。

render(){

  return (
      <View style={{
        flex: 1
      }}>
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
        style={styles.listView}
      />
      </View>
    );
  }
  renderRow(data) {

    var header = (
      <View>
          <View style={styles.rowContainer}>
            <View  style={styles.textContainer}>
              <Text style={styles.title}>{data.nid}</Text>
              <Text style={styles.description} numberOfLines={0}>{data.title}</Text>
            </View>
          </View>
          <View style={styles.separator}></View>
    </View>
    );
///////////
    var cid = [];
    var content = [];
    for(let x=0; x < Object.keys(data.course).length; x++){
      cid[x] = data.course[x].course_id;
      content.push(
        <TouchableHighlight
        underlayColor='#e3e0d7'
        key={x}
        onPress={()=> {
          this.rowPress(x); /////  here i need to redirect user to another page to show course's details
        }}
        style={styles.child}
        >
        <Text style={styles.child}>
        {data.course[x].title}
        </Text>
        </TouchableHighlight>
      );
    }
    var clist = (
      <View style={styles.rowContainer}>
      {content}
      </View>
    );
////////////
    return (
      <Accordion
        header={header}
        content={clist}
        easing="easeOutCubic"
      />
    );
  }

我想将用户重定向到页面并显示详细信息，并且我想要一个标题标题和一个后退按钮（例如Navigator或NavigatorIOS）。

我找到了一个示例应用程序，它可以完全满足我的需求，但是对我来说太复杂了，以至于我不了解它的工作方式，请响应本机的tabbar-navigator（iOS）

我研究了许多示例和教程。 我试图将其代码实施到我的代码中，但没有用。 还可以找到其他一些使用redux的教程，但这对我来说是如此复杂和困难。 我正在寻找更简单的东西。 使用Redux导航

希望收到您的来信，我们将竭诚为您服务。 提前致谢！

Answer 1

我发现，当我只有几个场景并且想要在它们之间导航时，最佳实践是使用Navigator或NavigatorIOS。

我继续执行我的应用程序，并做了一些其他的场景和组件（只有很少的层次深入），我发现Navigator或NavigatorIOS不能正常工作。 然后我切换到NavigationExperimental，那太棒了。 然后我在状态管理中遇到了一些问题，我发现了关于redux的问题。 起初并不容易，但是当我启动它时，您会爱上它。

因此，对于像我这样的新手，最好先从redux开始。 那会让您的生活更轻松:)