如何在另一个React组件中使用createBottomTabNavigator

Question

我正在将旧的本机项目更新为一个新的项目，并且得到

  

永久违反：此导航器缺少导航道具...

现在出错。但是我不知道如何在最新的反应导航版本的另一个组件中使用createBottomTabNavigator。

感谢您的帮助！

renderModel() {
  return (
    <View>
      <Text>Dummy Sample</Text>
      <GeoResult /> // this is createBottomTabNavigator.
    </View>
  )
}

Answer 1

这是我在React Component中实现createBottomTabNavigator的示例

注意：我使用的是反应导航版本3.3.0

import { createBottomTabNavigator, createAppContainer } from 'react-navigation'
import FirstTab from './tabs/FirstTab';
import SecondTab from './tabs/SecondTab';
import ThirdTab from './tabs/ThirdTab';
import FourthTab from './tabs/FourthTab';
import FifthTab from './tabs/FifthTab'
const BottomTabNav = createBottomTabNavigator(
  {
    FirstTab,
    SecondTab,
    ThirdTab,
    FourthTab,
    FifthTab
  },
  {
    initialRouteName: 'FirstTab',
  }
);

export default createAppContainer(BottomTabNav);

渲染：

      render() {
    return (
      <View style={{flex:1, backgroundColor: 'white'}}>

        <Text style={{paddingTop:20}}>Text on the Top of BottomTab Navigator</Text>

        <BottomTabNav/> 

      </View>

    )
  }
}

输出图像：