react native如何自定义底部导航答案

【问题标题】：How to customize the bottom navigation in react nativereact native如何自定义底部导航
【发布时间】：2020-06-15 11:26:23
【问题描述】：

尝试像下图那样在本机反应中构建底部导航有什么帮助吗？ enter image description here

【问题讨论】：

你用的是什么 ui 库？
反应导航 v5
我的意思是 UI 库而不是导航库。你在使用 UI 库吗？或者只是使用 css 进行样式化
不不不使用任何 UI 库。只是想用样式来修复它。
太好了，你能粘贴一些代码让我帮忙吗？

标签： react-native

【解决方案1】：

您可以使用react-native-router-flux 或其他任何东西，并根据您的风格切换大小写，例如底部：

第一个import { Router, Scene ,Drawer} from 'react-native-router-flux';

在您的默认导出应用组件中：

export default class App extends React.Component{
  render() {
    return (
      <Router>
        <Scene key="root" hideNavBar>
              <Scene key="splash" component={Splash} initial/>
              <Scene key="main" tabs={true} swipeEnabled={false} tabBarPosition={'bottom'}
                    tabBarStyle={styles.tabBar} showLabel={false} default="home">
                  <Scene
                      key="home"
                      title="Home"
                      icon={TabIcon}
                      hideNavBar={true}
                      initial
                      component={Home}/>
                  <Scene
                      key="categories"
                      title="Categories"
                      icon={TabIcon}
                      hideNavBar={true}
                      component={Categories}/>
                  <Scene
                      key="search"
                      title="Search"
                      icon={TabIcon}
                      hideNavBar={true}
                      component={Search}/>
                  <Scene
                      key="profile"
                      title="Profile"
                      icon={TabIcon}
                      hideNavBar={true}
                      component={Profile}/>
              </Scene>

        </Scene>
    </Router>
    )
  }
}

然后创建你的TabIcon 函数：

const TabIcon = ({ focused, title }) => {
  switch (title) {
    case "Home":
      color = focused ? 'black' : 'grey';
      return (
        <View style={styles.tabView}>
          <Icon name="ios-home" size={30} color={color} />
          <Text style={styles.tabLabel}>Home</Text>
        </View>
      );
    case "Categories":
      color = focused ? 'black' : 'grey';
      return (
        <View style={styles.tabView}>
          <Icon name="ios-list" size={30} color={color} />
          <Text style={styles.tabLabel}>Categories</Text>
        </View>
      );
    case "Search":
      color = focused ? 'black' : 'grey';
      return (
        <View style={styles.tabView}>
          <Icon name="ios-search" size={30} color={color} />
          <Text style={styles.tabLabel}>Search</Text>
        </View>
      );
    case "Profile":
      color = focused ? 'black' : 'grey';
      return (
        <View style={styles.tabView}>
          <Icon name="md-person" size={30} color={color} />
          <Text style={styles.tabLabel}>Profile</Text>
        </View>
      );
  }

};

最后你可以通过创建 styleSheet 来使用自己的样式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabBar: {
    backgroundColor: 'white',
  },
  navigationBarStyle: {
    backgroundColor: 'red',
  },
  navigationBarTitleStyle: {
    color: 'white',
  },
  icon: {
    width: 18,
    height: 22,
    padding: 5
  },
  tabView: {
    alignItems: 'center'
  },
  tabLabel: {
    fontSize: 12,
    textAlign: 'center'
  },

});

【讨论】：

【解决方案2】：

您可以使用tabbaricon 和tabBarLabel

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaricon

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();


return (
<Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({focused, horizontal, tintColor}) => (
            //  https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaricon
            <Image
              fadeDuration={0}
              style={{width: 22, height: 22}}
              source={}
            />
          ),
        }}
      />
</Tab.Navigator>
)

【讨论】：