Einführung in den Einsatz von React-Navigation in der Entwicklung

Der in diesem Artikel mit Ihnen geteilte Inhalt ist eine Einführung in die Verwendung von React-Navigation. Er hat einen gewissen Referenzwert.

Täglicher Unsinn

react-navigation ist eine Navigationslösung der React-Community. Nach meiner einmonatigen Senior Erfahrung in der Reaktionsentwicklung zu urteilen, kann man ohne Übertreibung sagen, dass es react-native eine der wesentlichen Bibliotheken für die App-Entwicklung ist.

Während des Entwicklungsprozesses haben verschiedene Seiten aufgrund unterschiedlicher Geschäftsanforderungen unterschiedliche häufig verwendete verschiedene Überschriften, auf die ich gestoßen bin. react-navigation

Ich bin der Haupttext

Tabs am unteren Rand sind eine sehr häufige Anforderung für Apps.

stellt auch entsprechende APIs zum Erstellen von unteren Registerkarten bereit: react-navigationcreateBottomTabNavigator

Wie passt man die Kopfzeile der Registerkartenseite an? Lassen Sie uns von Fall zu Fall besprechen:

Alle Registerkarten erfordern eine Kopfzeile

Es ist sehr einfach und erfordert keine zusätzliche Konfiguration.

Keine Kopfzeilen für alle Registerkartenseiten

Das erste, was Ihnen vielleicht einfällt, ist, das

-Objekt jeder Seite in createBottomTabNavigator auf Null zu setzen. navigationOptions

createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null // 无效！！
      }
    }
  }
)

headerAber tatsächlich akzeptiert das -Objekt in

den createBottomTabNavigator-Parameter nicht, zumindest ist er nicht im Dokument geschrieben. Offizielles DokumentnavigationOptionsheaderLösung: In der Navigation auf der Stammebene festlegen.

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator, // TabNavigator就是通过createBottomTabNavigator创建的底部导航
      navigationOptions: {
        header: null
      }
    }
    // other pages
  }
)

Nur ​​eine bestimmte Registerkarte erfordert eine Kopfzeile

Tatsächlich können Navigatoren ineinander verschachtelt sein. Genau wie im obigen Beispiel ist die Hauptroutenseite die untere Navigation, die von

erstellt wurde. Ebenso kann die Seite eines bestimmten Tabs in der unteren Navigation auch eine Navigationsseite sein. Es ist etwas kompliziert, schauen wir uns den Code an

const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        // some options
      }
    },
    User: { // user页要"头"~
      screen: createStackNavigator(
        User: {
          screen: User,
          navigationOptions: {
            header: customHeader
          }
        }
      )
    }
  }
)

const appNavigator = createStackNavigator(
  {
    Main: {
      screen: bottomTabNavigator,
      navigationOptions: {
        header: null // 这里要将bottomTabNavigator的header设为null
      }
    },
    Other: {
      screen: Other
    }
  }
)

createBottomTabNavigator Denn standardmäßig hat BottomTabNavigator einen eigenen Header, und der Benutzer hat eine Routing-Seite mit einem Header erstellt, also den Header der Route (bottomTabNavigato) Auf null gesetzt. Wenn nicht, hat die Seite zwei Kopfzeilen. Sie können es selbst versuchen.

MainEine bestimmte Registerkartenseite benötigt keine Kopfzeile oder muss die Kopfzeile anpassen

Was soll ich tun, wenn ich nur eine bestimmte Registerkartenseite habe, die keine Kopfzeile benötigt?

Noch ab

kann das navigationPptions-Attribut eine Funktion sein, die ein
-Objekt akzeptiert und ein neues Objekt zurückgibt. navigationOptionsnavigationFür das

-Objekt können Sie die offizielle Dokumentation einsehen

navigationHier verwenden wir das

-Attribut des Objekts.

stateJetzt haben wir die folgende Navigationskonfiguration:

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: '首页'
      }
    },
    Phone: {
      screen: createStackNavigator(
        {
          Phone: {
            screen: Phone,
            navigationOptions: ({ navigation }) => (
              { // phoneHeader为自定义React组件
                header: <PhoneHeader navigation={navigation}/>
              }
            )
          }
        }
      ),
      navigationOptions: {
        tabBarVisible: false,
        title: '机型'
      }
    },
    User: {
      screen: User,
      navigationOptions: {
        title: '我的'
      }
    }
  }
)

Der obige Code erstellt eine untere Navigation mit 3 Registerkarten, in denen der

-Header angepasst wird. Als nächstes müssen wir das

-Attribut von phone in appNavigator konfigurieren und je nach Route unterschiedliche Header verwenden (d. h. wenn Sie sich auf der Startseite oder Benutzerseite befinden, verwenden Sie den Standard-Header). , wenn Sie sich auf der Telefonseite befinden, TabNavigatorKopfzeile entfernennavigation Warum die Kopfzeile entfernen?

Da die Telefonseite die Kopfzeile angepasst hat, müssen wir sie nur entfernen Die äußere Ebene reicht aus. Andernfalls gibt es zwei Header (TabNavigator und Telefonheader). Außerdem kann der benutzerdefinierte Header im

-Attribut konfiguriert werden. Sie können es selbst ausprobieren.)

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator,
      navigationOptions: ({ navigation }) => {
        const titleMap = {
          Home: '首页',
          User: '我的'
        }
        // 根据路由的顺序以及路由名定义title
        const result = {
          title: titleMap[navigation.state.routes[navigation.state.index].routeName],
          headerTitleStyle: {
            fontWeight: '600',
            color: color.gray_1,
            fontSize: px2p(18)
          },
          headerBackTitle: null
        }
        // 在配置TabNavigator时，phone页面是第一个定义的(zero-indexed)。
        // 所以当index为1的时，header设为null
        // 或者将header设为自定义header，对应修改TabNavigator中phone。
        if (navigation.state.index === 1) { 
          result.header = null
          result.headerTransparent = true
        }
        return result
      }
    },
    ...pages // 其他页面
  },
  {
    initialRouteName: 'Main'
  }
)

appNavigatorVerwandte Empfehlungen: TabNavigatornavigationAnalyse des React-Ereignissystems

Analyse der Gründe warum die Animation in React nicht wirksam wird

Das obige ist der detaillierte Inhalt vonEinführung in den Einsatz von React-Navigation in der Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!