作者:周鑫先生_852 | 来源:互联网 | 2022-12-07 02:07
目前,我有redux和stacknavigator,我想实现一个底部标签导航器。有了这个,我发现了关于tabnavigator的信息,我不确定如何实现这两个。这是我当前的App.js:
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStackNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
import store from './store'; //Import the store
import Home from './components/home' //Import the component file
import Cart from './components/cart';
import SearchResults from './components/searchResults';
export default class App extends Component {
render() {
return (
);
}
}
const Root = createStackNavigator(
{
Home: {
screen: Home
},
Cart:{
screen: Cart
},
SearchResults:{
screen: SearchResults
}
},
{
initialRouteName: 'Home',
}
);
我需要使用stacknavigator触发我的“搜索”按钮并从中传递数据,同时我正在使用redux。在这种情况下,我是否也可以使用底部标签导航器?
1> 小智..:
使用stacknavigator创建其他stck,然后将这些堆栈添加到tabnavigator中。通常,每个堆栈应属于任何选项卡。就像您有用户堆栈和用户详细信息屏幕,但只有用户列表选项卡一样,用户详细信息屏幕也将突出显示用户列表选项卡。下面的代码与您的代码无关,但可能会给您带来帮助。
const homeStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions:{
title : "Home",
...headerStyle
}
},
AboutUs: {
screen: AboutUs,
navigationOptions:{
title : "About Us",
...headerStyle
}
},
})
const pickerStack = createStackNavigator({
UsersList: {
screen: UsersList,
navigationOptions:{
title : "Users List",
...headerStyle
}
},
UsersDetails: {
screen: UsersDetails,
navigationOptions:{
title : "Users Details",
...headerStyle
}
},
PickerSignup: {
screen: PickerSignup,
navigationOptions:{
title : "Signup as a Picker",
...headerStyle
}
}
});
const App = createBottomTabNavigator({
Home: homeStack,
Users: pickerStack
},
{
initialRouteName : "Home",
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
let routeIcOnMapping= {
'Home' : 'home',
'Users':'account-multiple',
'Food':'food'
}
icOnName= (routeName && routeIconMapping[routeName]) ? routeIconMapping[routeName] : 'home';
return ;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
activeBackgroundColor: 'white'
},
}
);