React native 如何获得“材质底部”选项卡导航器下方的视图

我想要达到的就是这样

所以有一个底部选项卡导航器，在它下面，我想显示我的自定义视图

有什么方法可以让我实现它吗

底部选项卡代码

const Tabs = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
    },

    Profile: {
      screen: Profile,
    },
    ...
  },
);

export const Root = createStackNavigator({

  Tabs: {
    screen: Tabs,
    navigationOptions: {
      header: null,
    }
  },

  ...

},
{
  initialRouteName: 'Tabs',
});

---

使用CreateBoottomTabNavigator实际上不可能做到这一点，您可以创建一个水平平面列表来创建如下选项卡栏：

  <FlatList
                horizontal
                keyExtractor={item => item}
                extraData={this.state}
                showsHorizontalScrollIndicator={false}
                ref={r => (this.tabList = r)}
                data={tabsArray}
                renderItem={this.renderTabHeader}
              />
    ```

and then add renderTabHeader method like this : 


renderTabHeader = ({ item, index }) => {
      return (
        <View style={{ flexDirection: 'column' }}>
          <Text
            onPress={() => {
              if (index !== 4) this.changeIndex(index);
              else
                this.props.navigation.navigate('screenName');
            }}
            style={{
              paddingHorizontal: 16,
              paddingVertical: 8,
              textAlign: 'center',
              color:
                this.state.selectedTab === index
                  ? color.primaryTextColor
                  : color.inactiveTextColor,
              fontFamily: font.medium,
            }}>
            {item}
          </Text>
          {this.state.selectedTab === index ? (
            <View
              style={{
                height: 2,
                width: '100%',
                backgroundColor: 'white',
              }}
            />
          ) : null}
        </View>
      );
  };

item}
extraData={this.state}
showshorizontalscrolindicator={false}
ref={r=>（this.tabList=r）}
数据={tabsArray}
renderItem={this.renderTabHeader}
/>
```
然后添加renderTabHeader方法，如下所示：
renderTabHeader=（{item，index}）=>{
返回(
{
如果（索引！==4）此.changeIndex（索引）；
其他的
this.props.navigation.navigate（'screenName'）；
}}
风格={{
水平方向：16，
填充垂直：8，
textAlign:'中心'，
颜色：
this.state.selectedTab==索引
？color.primaryTextColor
：color.invotextcolor，
fontFamily:font.medium，
}}>
{item}
{this.state.selectedTab==索引(
)：null}
);
};

使用CreateBoottomTabNavigator实际上是不可能的，您可以创建一个水平平面列表来创建如下选项卡栏：

  <FlatList
                horizontal
                keyExtractor={item => item}
                extraData={this.state}
                showsHorizontalScrollIndicator={false}
                ref={r => (this.tabList = r)}
                data={tabsArray}
                renderItem={this.renderTabHeader}
              />
    ```

and then add renderTabHeader method like this : 


renderTabHeader = ({ item, index }) => {
      return (
        <View style={{ flexDirection: 'column' }}>
          <Text
            onPress={() => {
              if (index !== 4) this.changeIndex(index);
              else
                this.props.navigation.navigate('screenName');
            }}
            style={{
              paddingHorizontal: 16,
              paddingVertical: 8,
              textAlign: 'center',
              color:
                this.state.selectedTab === index
                  ? color.primaryTextColor
                  : color.inactiveTextColor,
              fontFamily: font.medium,
            }}>
            {item}
          </Text>
          {this.state.selectedTab === index ? (
            <View
              style={{
                height: 2,
                width: '100%',
                backgroundColor: 'white',
              }}
            />
          ) : null}
        </View>
      );
  };

item}
extraData={this.state}
showshorizontalscrolindicator={false}
ref={r=>（this.tabList=r）}
数据={tabsArray}
renderItem={this.renderTabHeader}
/>
```
然后添加renderTabHeader方法，如下所示：
renderTabHeader=（{item，index}）=>{
返回(
{
如果（索引！==4）此.changeIndex（索引）；
其他的
this.props.navigation.navigate（'screenName'）；
}}
风格={{
水平方向：16，
填充垂直：8，
textAlign:'中心'，
颜色：
this.state.selectedTab==索引
？color.primaryTextColor
：color.invotextcolor，
fontFamily:font.medium，
}}>
{item}
{this.state.selectedTab==索引(
)：null}
);
};

您可以制作自定义组件，并在导航中使用它：

const Tab = createBottomTabNavigator();
<Tab.Navigator tabBar={(props) => <BottomNavigationBar {...props} />}>
  <Tab.Screen name="blabla" .........
</Tab.Navigator>

const Tab=createBottomTabNavigator（）；
}>
您可以制作自定义组件，并在导航中使用它：

const Tab = createBottomTabNavigator();
<Tab.Navigator tabBar={(props) => <BottomNavigationBar {...props} />}>
  <Tab.Screen name="blabla" .........
</Tab.Navigator>

const Tab=createBottomTabNavigator（）；
}>