带TabNavigator的StackNavigator

时间:2020-11-04 02:16:37

标签: react-native

我需要有关TabNavigator和StackNavigator的帮助。 我想创建一个单按钮登录页面,按此按钮时,可以使用TabNavigation浏览页面。

代码..

const Tab = createMaterialBottomTabNavigator();
const StackNavigation = createStackNavigator();
function NavigateStack() {
  return (
    <StackNavigation.Navigator initialRouteName="StackLogin">
      <StackNavigation.Screen name="StackLogin" component={StackLogin} />
    </StackNavigation.Navigator>
  );
}

function NavigateTab() {

  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="TabLocation" screenOptions={{ tabBarColor: '#2D95EA' }}>
        <Tab.Screen
          name="TabLocation"
          component={TabLocation}
          options={{
            tabBarLabel: '',
            tabBarIcon: (props) =<Image source={MapIcon} style={{ width: 70, height: 70 }} />
          }}/>

        <Tab.Screen

          name="TabHistoryOfIsland"

          component={TabHistoryOfIsland}
          options={{
            tabBarLabel: '',
            tabBarIcon: (props) =<Image source={InfoIcon} style={{ width: 70, height: 70 }} 
 />          }}  />
 <Tab.Screen
          name="TabNewPointOnMap"
          component={TabNewPointOnMap}
          options={{
            tabBarLabel: '',
           tabBarIcon: (props) =<Image source={PictureIcon} style={{ width: 70, height: 70 }} />

          }}

        />

        <Tab.Screen

          name="TabFauna"

          component={TabFauna}

          options={{

            tabBarLabel: '',

           tabBarIcon: (props) =<Image source={FaunaIcon} style={{ width: 70, height: 70 }} />
          }}/>

        <Tab.Screen
          name="TabFlora"
          component={TabFlora}
          options={{
            tabBarLabel: '',
            tabBarIcon: (props) =<Image source={FloraIcon} style={{ width: 70, height: 70 }}/>
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}



export default function Routes() {

  return (

    <NavigationContainer>

      <StackNavigation.Navigator initialRouteName="NavigateStack">

        <StackPoint.Screen name="NavigateStack" component={NavigateStack} />

        /**

         * Error line below

         */

        <Tab.Screen name="NavigateTab" component={NavigateTab} />

      </StackNavigation.Navigator>

    </NavigationContainer>

  );

}

0 个答案:

没有答案