Question

试图像下面的图像一样在本机中构建底部导航有帮助吗？ enter image description here

Answer 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'
  },

});

Answer 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>
)

如何在React Native中自定义底部导航

2 个答案: