小编Gab*_*ler的帖子

我知道之前有人问过这个问题，但仅适用于旧版本的 react-navigation。从那时起，一些事情发生了变化。createBottomTabNavigator使创建底部导航器的速度更快，并且该功能jumpToIndex()不再存在。

我的问题是如何创建一个类似于 Instagram 的底部选项卡，其中第一个、第二个、第四个和第五个导航按钮的作用类似于通常的选项卡导航器，中间按钮 ( screen3) 打开 modal screen3Modal。

我已经在 react-navigation 3.xx 中尝试过，使用createBottomTabNavigator和createStackNavigator。

import React, { Component, } from 'react';
import { createBottomTabNavigator, createStackNavigator, createAppContainer, } from 'react-navigation';
import { Screen1, Screen2, Screen3, Screen4, Screen5 } from './screens';

const TabNavigator = createBottomTabNavigator({
  screen1: { screen: Screen1, },
  screen2: { screen: Screen2, },
  screen3: { 
    screen: () => null, 
    navigationOptions: () => ({
      tabBarOnPress: () => this.props.navigation.navigate('screen3Modal')
    })
  },
  screen4: …

我有一个带有一些元素的 FlatList，其中顶部元素应该与底部元素重叠。为此，我想反转 zIndex，但 FlatList 不断覆盖我的 zIndex。

在下面的代码中，我试图用 zIndex 反转，zIndex: 0 - index但它不起作用

import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  _renderPost({ index }) {
    return <View style={[styles.item, { zIndex: 0 - index, }]} />;
  }
  render() {
    return <FlatList data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost} />;
  }
}

const styles = StyleSheet.create({
  item: { 
    height: 200, 
    borderWidth:2, 
    borderBottomLeftRadius:50, 
    borderBottomRightRadius:50, 
    marginBottom: -50, 
    backgroundColor:"white",
  }, …