javascript - react native : TabBarIOS and Navigation

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 来显示组件，但它只显示一个带有标题的空白页面。它不显示组件的内容。我看到很多这样的例子，但它对我不起作用。也许是因为我没有将 navigator 或 navigaatorios 用于 index.ios ，因为在我看到的大多数示例中，他们将 navigatorios 用于索引并设置初始路由。我尝试过，但对我不起作用。

到这里为止一切正常。在类(class)页面中，我有一个 ListView ，其下有项目(实际上是带有标题的项目，可折叠)，当用户单击每个项目时，我需要将用户重定向到页面以显示该类(class)的详细信息。 (我也应该传递一些论点)。

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

期待您的来信，非常感谢任何帮助。提前致谢!

Answer 1

我发现当我的场景很少并且我想在它们之间导航时，最佳做法是使用 Navigator 或 NavigatorIOS。

我继续我的应用程序并做了更多的场景和组件(很少有深入的层次)，我发现 Navigator 或 NavigatorIOS 无法为此目的正常工作。然后我切换到 NavigationExperimental，那太棒了。然后我在状态管理方面遇到了一些问题，我发现了 redux。一开始并不容易，但是当我开始它时，你会喜欢它的。

所以对于像我这样的新手来说，最好先从 redux 开始。这会让你的生活变得更轻松:)