React Native : TabBarIOS和导航

Question

我有一个简单的应用程序，有3个标签。选项卡由index.ios中的TabBarIOS定义。我没有用导航器也没有用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或navigatorios，因为在我看到的大多数示例中，他们将navigatorios放入索引并设置初始路由。我试过了，但对我不起作用。

​

​

在这里之前一切都很好。在课程页面，我有一个列表视图下的项目(实际上项目与标题，这是可折叠的)，当用户点击每个项目，我需要将用户重定向到一个页面，以显示课程的详细信息。(我也应该传递一些参数)。

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)。

我已经找到了一个样例应用程序，它做的正是我想要的，但它对我来说太复杂了，我不知道它是如何工作的，react native tabbar-navigator (iOS)

我已经研究了许多示例和教程。我试图将他们的代码实现到我的代码中，但它不起作用。我也找到了其他一些使用redux的教程，但它对我来说太复杂和困难了。我在找更简单的东西。Navigation using Redux

期待您的回音，如有任何帮助，我们不胜感激。提前感谢！