Question

我想将BottomNavigation添加到我的应用程序的屏幕之一，我已经使用过StackNavigation。如何在路由流程中实现BottomNavigation？

我尝试过这种方式

import React from 'react';
import LoginForm from './src/Login/LoginForm';
import Register from './src/Register/Register';
import Timeline from './src/Timeline/Timeline';
import Post from './src/Product/Post';
import Profile from './src/Profile/Profile';
import IconWithBadge from './src/Utility/IconWithBadge';
import {createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer } from "react-navigation";
import { Font } from 'expo';



const AuthStack = createStackNavigator(
  {
    LoginScreen: {screen:LoginForm,navigationOptions: { header: null }},
    RegisterScreen: {screen: Register,navigationOptions: { header: null }},
  },
  {
    initialRouteName: "LoginScreen",
  }
);
const AppStack = createStackNavigator(
  createBottomTabNavigator(
    {
      TimelineScreen:Timeline,
      ProductScreen:Post
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
          const { routeName } = navigation.state;
          let IconComponent = Ionicons;
          let iconName;
          if (routeName === 'TimelineScreen') {
            iconName = `ios-home${focused ? '' : '-outline'}`;
            // Sometimes we want to add badges to some icons.
            // You can check the implementation below.
            IconComponent = IconWithBadge;
          } else if (routeName === 'ProductScreen') {
            iconName = `ios-plus`;
          }

          // You can return any component that you like here!
          return <IconComponent name={iconName} size={25} color={tintColor} />;
        },
      }),
      tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      },
    }
  )

)


const AppContainer = createAppContainer(
  createSwitchNavigator(
  {
    Auth: AuthStack,
    App: AppStack
  }
));


export default class App extends React.Component {

  render() {
    return (
      <AppContainer/>
    );
  }
}

这是IconWithBadge.js

import React, {Component} from 'react';
class IconWithBadge extends React.Component {
  render() {
    const { name, badgeCount, color, size } = this.props;
    return (
      <View style={{ width: 24, height: 24, margin: 5 }}>
        <Ionicons name={name} size={size} color={color} />
        {badgeCount > 0 && (
          <View
            style={{
              // /If you're using react-native < 0.57 overflow outside of the parent
              // will not work on Android, see https://git.io/fhLJ8
              position: 'absolute',
              right: -6,
              top: -3,
              backgroundColor: 'red',
              borderRadius: 6,
              width: 12,
              height: 12,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
              {badgeCount}
            </Text>
          </View>
        )}
      </View>
    );
  }
}

这是我的App.js

import React from 'react';
import LoginForm from './src/Login/LoginForm';
import Register from './src/Register/Register';
import Timeline from './src/Timeline/Timeline';
import Post from './src/Product/Post';
import Profile from './src/Profile/Profile';
import IconWithBadge from './src/Utility/IconWithBadge';
import {createBottomTabNavigator,createStackNavigator,createSwitchNavigator, createAppContainer } from "react-navigation";

const AuthStack = createStackNavigator(
  {
    LoginScreen: {screen:LoginForm,navigationOptions: { header: null }},
    RegisterScreen: {screen: Register,navigationOptions: { header: null }},
  },
  {
    initialRouteName: "LoginScreen",
  }
);
const AppStack = createStackNavigator(
  {
    TimelineScreen: {screen:Timeline,navigationOptions: { header: null,title: "Welcome to the dashboard" }}
  }
)

const AppContainer = createAppContainer(
  createSwitchNavigator(
  {
    Auth: AuthStack,
    App: AppStack
  }
));

export default class App extends React.Component {

  render() {
    return (
      <AppContainer/>
    );
  }
}

我的代码似乎不适用于此处的设置，如何将“底部导航”路由放入堆栈导航中以便在时间轴屏幕上看到它

Answer 1

如下修改您的代码。基本上将createSwitchNavigator替换为createBottomTabNavigator

const AppContainer = createAppContainer(
  createBottomTabNavigator(
  {
    Auth: AuthStack,
    App: AppStack
  }
));

如何在本机导航路由中将“ createBottomTabNavigator”传递给“ createAppContainer”

1 个答案: