我正在尝试使用闪亮的新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
的内容不可见。我究竟做错了什么?我觉得有些东西我不知道,但这可能是一个错误。
答案 0 :(得分:1)
问题出在selectTabAtIndex
类的com.reactnativenavigation.viewcontrollers.BottomTabsController
方法上。应用下面的diff
修复了它。
diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsContr
index 87812bc5..69d45877 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java
@@ -145,7 +145,7 @@ public class BottomTabsController extends ParentController implements AHBottomNa
void selectTabAtIndex(final int newIndex) {
getView().removeView(getCurrentView());
bottomTabs.setCurrentItem(newIndex, false);
- getView().addView(getCurrentView());
+ getView().addView(getCurrentView(), MATCH_PARENT, MATCH_PARENT);
}
@NonNull