Я пытаюсь реализовать навигацию с помощью нижних вкладок в моем новом блестящем приложении React Native. Я решил начать с React Native Navigation, версии два.
Вот код на данный момент:
import React from 'react'
import { Navigation } from 'react-native-navigation'
import { Text, View } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
const prepareIcons = async () => {
const [ home, trend, wifi, list, help ] = await Promise.all([
Icon.getImageSource('ios-home', 30),
Icon.getImageSource('ios-trending-up', 30),
Icon.getImageSource('ios-wifi', 30),
Icon.getImageSource('ios-list', 30),
Icon.getImageSource('ios-help-buoy', 30)
])
return { home, trend, wifi, list, help }
}
const Monitor = class extends React.Component {
render() {
return <View><Text>Monitor</Text></View>
}
}
const Usage = class extends React.Component {
render() {
return <View><Text>Usage profile</Text></View>
}
}
const Connection = class extends React.Component {
render() {
return <View><Text>WiFi connection</Text></View>
}
}
const Reports = class extends React.Component {
render() {
return <View><Text>Reports log</Text></View>
}
}
const Support = class extends React.Component {
render() {
return <View><Text>Support</Text></View>
}
}
const main = async () => {
const icons = await prepareIcons()
Navigation.events().onAppLaunched(() => {
Navigation.setRoot({
bottomTabs: {
children: [{
component: {
name: 'Monitor',
options: {
bottomTab: {
icon: icons.home,
title: 'Monitor',
visible: true
}
}
}
}, {
component: {
name: 'Usage',
options: {
bottomTab: {
icon: icons.trend,
title: 'Usage'
}
}
}
}, {
component: {
name: 'Connection',
options: {
bottomTab: {
icon: icons.wifi,
title: 'WiFi'
}
}
}
}, {
component: {
name: 'Reports',
options: {
bottomTab: {
icon: icons.list,
title: 'Reports'
}
}
}
}, {
component: {
name: 'Support',
options: {
bottomTab: {
icon: icons.help,
title: 'Support'
}
}
}
}]
}
})
})
}
Navigation.registerComponent('Monitor', () => Monitor)
Navigation.registerComponent('Usage', () => Usage)
Navigation.registerComponent('Connection', () => Connection)
Navigation.registerComponent('Reports', () => Reports)
Navigation.registerComponent('Support', () => Support)
main()
Он производит это (эмулятор Android):
Приложение откроется. Ошибок нет. Вкладки меняются при нажатии, но, как вы можете видеть на снимке экрана, содержимое текущего компонента Connection
не отображается. Что я делаю неправильно? Я чувствую, что чего-то не хватает, но это может быть ошибка.
- Версия React Native Navigation: 2.0.2125
- Версия React Native: 0.53.0
- Платформа: Android
- Устройство: Nexus 5X, Android 8.1.0, отладка