Question

我有简单的应用程序，有3个标签。选项卡由index.ario中的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用于索引并设置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）。

我找到了一个样本应用程序正在完成我正在寻找的东西，但它对我来说太复杂了，我不明白它是如何工作的， react native tabbar-navigator (iOS)

我已经研究过许多示例和教程。我试图将他们的代码实现到我的，但它没有用。还可以使用redux找到其他一些教程，但它对我来说太复杂了。我正在寻找更简单的东西。 Navigation using Redux

期待您的回音，任何帮助都非常感谢。在此先感谢！

Answer 1

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

我继续我的应用程序，并做了更多的场景和组件（很少级别深入），我发现Navigator或NavigatorIOS不能正常工作。然后我切换到NavigationExperimental，这太棒了。然后我在状态管理方面遇到了一些问题，我发现了有关redux的问题。起初并不容易，但是当我开始它时，你会喜欢它。

所以对于像我这样的新手来说，首先从redux开始会更好。这将使你的生活更轻松：）

React Native：TabBarIOS和导航

1 个答案: