在React native中创建自定义底部标签导航器

Question

我想在react native中创建时尚且自定义的底部标签导航的大家好，任何人都不知道如何在上面创建此内容

Answer 1

[看看这个很棒的框架，React-Native-Tab-View。

Answer 2

很好的例子，很好的例子，可以使用反应导航

Answer 3

const ACTIVE_TAB_COLOR = '#60C3FF'
const INACTIVE_TAB_COLOR = '#aaa'



  const BottomStack = createBottomTabNavigator(
    {
      TAB_WALLET: {
        screen:Screen1,
        navigationOptions: {
          tabBarLabel: 'Screen1',
          tabBarIcon: ({ focused }) => <Icon name='iconname' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR}/>
        }
      },
      TAB_SEND: {
        screen: Screen2,
        navigationOptions: {
          tabBarLabel: 'Screen2',
          tabBarIcon: ({ focused }) => <Icon name='search' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR} />
        }
      },
      TAB_ACTIVITIES: {
        screen: Screen3,
        navigationOptions: {

          tabBarLabel: 'Screen3
          tabBarIcon: ({ focused }) => <Icon name='paper' focused={focused} color={focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR}/>
        }
      }
    },
    {
      tabBarPosition: 'bottom',
      swipeEnabled: false,
      animationEnabled: false,
      tabBarOptions: {
        activeTintColor: ACTIVE_TAB_COLOR,
        inactiveTintColor: INACTIVE_TAB_COLOR,
        showLabel: true,
        style: {
          borderTopWidth: 0,
          paddingTop: 3,
          paddingBottom: 4,
          height: 60,
          shadowColor: '#000',
          shadowOpacity: 0.1,
          shadowRadius: 20,
          shadowOffset: { width: 0, height: 0 }
        }
      }
    })