[英]React-Native: have anyone a running example for a bottomTabNavigator?
can anyone show me a running example for the bottomTabNavigator in React-native?任何人都可以向我展示 React-native 中的 bottomTabNavigator 的运行示例吗? The Example from the react-native page is not working来自 react-native 页面的示例不起作用
https://reactnavigation.org/docs/tab-based-navigation/ https://reactnavigation.org/docs/tab-based-navigation/
this is my package.json file in my project:这是我的项目中的 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
}
this is my bottomTabNavigator
:这是我的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;
than you can use this component in App.js
.你可以在App.js
使用这个组件。 this is my sample App.js
code:这是我的示例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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.