Reagieren Native: TabBarIOS und Navigation

Question

Ich habe einfache App, mit 3 Tabs. Registerkarten werden von TabBarIOS in index.ios definiert. Ich verwende weder Navigator noch NavigatorIOS. In jedem TabBarItem gebe ich einfach den Komponentennamen in Tags ein. Wie folgt aus:

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

Wenn Sie in Code zu sehen, die in dem ersten und dritten Reiter, ich zeige Inhalt des Elements von Puting Komponentennamen in Tags wie

<Courses /> 

Aber für die zweiten Punkt, i versucht mit navigatorios, um eine Komponente anzuzeigen, aber es zeigt nur eine leere Seite mit Titel. Es zeigt nicht den Inhalt der Komponente. Ich sehe viele Beispiele, die so funktionieren, aber es hat nicht für mich funktioniert. vielleicht, weil ich kein navigator oder navigator für index.ios benutze, weil in den meisten Beispielen, die ich sehe, sie navigatorios für index und set initialroute setzen. Ich habe es versucht, aber nicht für mich gearbeitet.

Alles funktioniert bis hier in Ordnung. Auf der Seite Kurse habe ich eine Listenansicht mit Elementen darunter (tatsächlich Elemente mit Kopfzeile, die zusammenklappbar sind). Wenn der Benutzer auf jedes Element klickt, muss ich den Benutzer auf eine Seite umleiten, um die Details dieses Kurses anzuzeigen. (Ich sollte auch einige Argumente weitergeben).

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" 
     /> 
    ); 
    } 

Ich möchte Benutzer auf eine Seite und zeigen Details umleiten, und ich möchte einen Kopftitel und eine Zurück-Taste haben (wie Navigator oder NavigatorIOS).

ich eine Beispiel-App gefunden haben, die genau das tut, was ich suche, aber es ist zu kompliziert für mich, dass ich nicht verstehen, wie es funktioniert, react native tabbar-navigator (iOS)

Ich habe sah in viele Beispiele und Tutorials. Ich habe versucht, ihren Code in meinen zu implementieren, aber es hat nicht funktioniert. Finden Sie auch einige andere Tutorials mit Redux, aber es ist so kompliziert und schwer für mich. Ich suche nach etwas einfacherem. Navigation using Redux

Wir freuen uns von Ihnen zu hören, Jede Hilfe wird sehr geschätzt. Danke im Voraus!

Answer 1

Ich fand heraus, dass wenn ich wenige Szenen habe und ich zwischen ihnen navigieren möchte, ist es am besten, Navigator oder NavigatorIOS zu verwenden.

Ich fahre mit meiner App fort und mache noch ein paar Szenen und Komponenten (mit wenigen Ebenen, die tief gehen) und ich habe herausgefunden, dass Navigator oder NavigatorIOS für diesen Zweck nicht richtig funktioniert. Dann bin ich zu NavigationExperimental gewechselt und das war super. Dann hatte ich einige Probleme in der Staatsverwaltung, ich habe von redux erfahren. Es war anfangs nicht einfach, aber wenn ich es anfange, wirst du es lieben.

Also für Neulinge wie mich ist es besser, zuerst mit Redux zu beginnen. das würde das Leben für Sie viel einfacher machen :)