React-Native：有没有人运行过bottomTabNavigator 的例子？

Question

任何人都可以向我展示 React-native 中的 bottomTabNavigator 的运行示例吗？ 来自 react-native 页面的示例不起作用

https://reactnavigation.org/docs/tab-based-navigation/

这是我的项目中的 package.json 文件：

{


"main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.5",
    "@react-navigation/bottom-tabs": "^5.9.2",
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-navigation": "^4.1.0",
    "react-navigation-stack": "^2.0.16"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

Answer 1

这是我的bottomTabNavigator ：

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Dimensions,
  AppRegistry,
} from 'react-native';
// import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer, } from 'react-navigation';
import { createStackNavigator, TransitionPresets } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/FontAwesome';
import Entypo from 'react-native-vector-icons/Entypo';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { fadeIn } from 'react-navigation-transitions';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';

import TabBarComponent from "../ComponentFolder/TabBarComponent";

import TestScreen from '../ScreenFolder/Test';
import HomeScreen from '../ScreenFolder/Home';

import ProfileScreen from '../ScreenFolder/Profile';
import ShopItemScreen from '../ScreenFolder/ShopItem';
import ProfileEditScreen from '../ScreenFolder/ProfileEdit';
import StockViewScreen from '../ScreenFolder/StockView';
import FunDashboardScreen from '../ScreenFolder/FunDashboard';
import NewsListScreen from '../ScreenFolder/NewsList';
import NewsScreen from '../ScreenFolder/News';
import WatchListBasketScreen from '../ScreenFolder/WatchListBasket';
import WatchListWatchScreen from '../ScreenFolder/WatchlistWatch';
import SymbolAddScreen from '../ScreenFolder/SymbolAdd';
import FunAnalysisScreen from '../ScreenFolder/FunAnalysis';
import FunAnalysisSearchScreen from '../ScreenFolder/FunAnalysisSearch';
import SymbolInfoScreen from '../ScreenFolder/SymbolInfo';
import SymbolAnalysisScreen from '../ScreenFolder/SymbolAnalysis';


import { colors } from '../Config';
import WatchlistWatch from '../ScreenFolder/WatchlistWatch';


const NewsNav1 = createStackNavigator({

  NewsList: { screen: NewsListScreen },
  News: { screen: NewsScreen },
}, {

  headerMode: "none",
  navigationOptions: {
    initialRouteName: "NewsList",
    headerVisible: false,

  }
}
);

const WatchListNav1 = createStackNavigator({

  WatchListWatch: { screen: WatchListWatchScreen },
  SymbolAdd: { screen: SymbolAddScreen },
  SymbolInfo: { screen: SymbolInfoScreen },
  SymbolAnalysis: { screen: SymbolAnalysisScreen },
  WatchListBasket: { screen: WatchListBasketScreen },
}, {

  headerMode: "none",
  navigationOptions: {
    initialRouteName: "WatchListWatch",
    headerVisible: false,
  },
  defaultNavigationOptions: {
    ...TransitionPresets.SlideFromRightIOS,
  }
}
);

const ProfileNav1 = createStackNavigator({

  Profile: { screen: ProfileScreen },
  ProfileEdit: { screen: ProfileEditScreen },
  ShopItem: { screen: ShopItemScreen },
}, {

  headerMode: "none",
  navigationOptions: {
    initialRouteName: "Profile",
    headerVisible: false,

  }
}
);

const StockViewNav = createStackNavigator({

  StockView: { screen: StockViewScreen },
  FunDashboard: { screen: FunDashboardScreen },
}, {

  headerMode: "none",
  navigationOptions: {
    initialRouteName: "StockView",
    headerVisible: false,
  }
}
);

const FunAnalysisNav1 = createStackNavigator({

  FunAnalysis: { screen: FunAnalysisScreen },
  FunAnalysisSearch: { screen: FunAnalysisSearchScreen },
}, {

  headerMode: "none",
  navigationOptions: {
    initialRouteName: "FunAnalysis",
    headerVisible: false,
  }
}
);


const BottomNavigator = createBottomTabNavigator(
  {
    ProfileNav: {
      screen: ProfileNav1,
      navigationOptions: {
        title: 'profile',
        tabBarIcon: ({ focused, horizontal, tintColor }) => (
          <Icon name="user-o" style={{ fontSize: (focused ? 38 : 26) }} color={tintColor} />
        ),
      },
    },
    StorSeen: {
      screen: StockViewNav,
      navigationOptions: {
        title: 'store',
        tabBarIcon: ({ focused, horizontal, tintColor }) => (
          <AntDesign name="home" style={{ fontSize: (focused ? 38 : 26) }} color={tintColor} />
        ),
      },
    },
    NewsNav: {
      screen: NewsNav1,
      navigationOptions: {
        title: 'news',
        tabBarIcon: ({ focused, horizontal, tintColor }) => (
          <Entypo name="news" style={{ fontSize: (focused ? 38 : 26) }} color={tintColor} />
        ),
      },
    },
    WatchListNav: {
      screen: WatchListNav1, // Empty screen
      navigationOptions: () => ({
        title: 'whatchlist',
        tabBarIcon: ({ focused, horizontal, tintColor }) => (
          <SimpleIcon name="eye" style={{ fontSize: (focused ? 38 : 26) }} color={tintColor} />
        ),
      }),
    },
    Home: {
      screen: FunAnalysisNav1,
      navigationOptions: {
        title: 'tahlil',
        tabBarIcon: ({ focused, horizontal, tintColor }) => (
          <SimpleIcon name="graph" style={{ fontSize: (focused ? 38 : 26) }} color={tintColor} />
        ),
      },
    },
  },
  {

    initialRouteName: 'StorSeen',
    lazyLoad: true,
    lazy: true,
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarComponent: props => {
      return (
        <View
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
          }} >
          <TabBarComponent {...props} />
        </View>
      );
    },
    tabBarOptions: {
      style: {
        backgroundColor: colors.color_green_tifani,
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingTop: 5,
      },
      iconStyle: {
        paddingTop: 0,
        paddingBottom: 50,
      },
      indicatorStyle: {
        backgroundColor: 'red',
      },
      showIcon: true,
      showLabel: true,
      activeTintColor: '#3376b8',
      inactiveTintColor: '#78797a',
    },
    navigationOptions: ({ navigation }) => ({
      tabBarOnPress: (tab, jumpToIndex) => {
        const { dispatch, state } = navigation;
        //alert(JSON.stringify(tab));
        if (tab.index == 2) {
          //   dispatch(NavigationActions.reset({
          //     index: 0,
          //     key: state.key,
          //     actions: [NavigationActions.navigate({ routeName: "CameraPage" })],
          // }))
        } else {
          //  jumpToIndex(tab.index)
        }
      },
    }),
  },
);
export default BottomNavigator;

你可以在App.js使用这个组件。 这是我的示例App.js代码：

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Dimensions,
  AppRegistry,
} from 'react-native';

import { createAppContainer,} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {fromRight,fromLeft} from 'react-navigation-transitions';

import BottomNavigator from './Src/ComponentFolder/BottomNavigator'
import DrawerNavigator from './Src/ComponentFolder/DrawerNavigator'

import SplashScreen from './Src/ScreenFolder/Splash';
import LoginScreen from './Src/ScreenFolder/Login'
import RegisterScreen from './Src/ScreenFolder/Register';
import ConfirmScreen from './Src/ScreenFolder/Confirm'
import ProfileScreen from './Src/ScreenFolder/Profile';
import ProfileEditScreen from './Src/ScreenFolder/ProfileEdit';
import StockViewScreen from './Src/ScreenFolder/StockView';

import NewsListScreen from './Src/ScreenFolder/NewsList';
import NewsScreen from './Src/ScreenFolder/News';
import WatchlistWatchScreen from './Src/ScreenFolder/WatchlistWatch';
import WatchlistBasketScreen from './Src/ScreenFolder/WatchListBasket';
import SymbolInfoScreen from './Src/ScreenFolder/SymbolInfo';
import SymbolAnalysisScreen from './Src/ScreenFolder/SymbolAnalysis';
import SymbolAddScreen from './Src/ScreenFolder/SymbolAdd';
import FunAnalysisScreen from './Src/ScreenFolder/FunAnalysis';
import IntroSliderScreen from './Src/ScreenFolder/IntroSlider';





const MainNavigator = createStackNavigator({
  
  Splash:{screen:SplashScreen},
  Intro:{screen:IntroSliderScreen},
  Register:{screen:RegisterScreen},
  Login:{screen:LoginScreen},
  Bottom:BottomNavigator,
  News:{screen:NewsScreen},
  Confirm:{screen:ConfirmScreen},


}, {
  // transitionConfig: () => fromRight(1000),
  headerMode: "none",
  navigationOptions: {
    headerVisible: false
  }
}
);

//-----------------------------------
const App = createAppContainer(MainNavigator);

export default App;