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 // 无效！！
}
}
}
)Nach dem Login kopieren
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
}
)Nach dem Login kopieren
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
}
}
)Nach dem Login kopieren
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: '我的'
}
}
}
)Nach dem Login kopieren
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'
}
)Nach dem Login kopieren
appNavigatorVerwandte Empfehlungen:
TabNavigatornavigationAnalyse des React-Ereignissystems
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!
