react-navigation如何将tabBarNavigation放置在图像背景的顶部

Question

我正在尝试在图像背景顶部设置tabBarNavigation，以便可以通过tabBar看到图像背景。如果将position设置为absolute，则可以看到我的背景图片，但缺少text和tabBar。这是我的代码：

export default class App extends Component {

  render(){
  return(
    <SafeAreaView style={{flex:1}}>
    <AppContainer/>
    </SafeAreaView>
  )
 }
} 

class HomeScreen extends Component {

  render(){
  return(
      <View>
      <ImageBackground
                style={{width:375, height:400}}
                source={require('./assets/pizza.jpg')}>
                </ImageBackground>
      </View>
  )
}
}

const AppTabNavigator = createMaterialTopTabNavigator({
  Home:{
  screen:HomeScreen,
  navigationOptions: {
      header: null,
      tabBarVisible:true,
      activeTintColor: '#e91e63',
    }
  },
  Second:{
  screen: Second,
  navigationOptions: {
      header: null,
      tabBarVisible:true,
      }
    },
    Third:{
    screen: Third,
    navigationOptions: {
        header: null,
        tabBarVisible:true,
        }
      },
    Fourth:{
    screen: Fourth,
    navigationOptions: {
        header: null,
        tabBarVisible:true,
        }
      }
    }, {
    tabBarOptions: {
    style: {
      backgroundColor: 'gray',
//If I set position to absolute, I can see background image but text is missing
      position:'absolute'
    }
  }
}
  )

const AppContainer = createAppContainer(AppTabNavigator)

任何评论或建议，将不胜感激！在此先感谢：）

Answer 1

我希望您要实现如图所示的方式：

如果是这样，请修改您的 tabBarOptions ：

  tabBarOptions: {
   showLabel: true,
    style: {
        backgroundColor: 'rgba(22, 22, 22, 0)',
        position: 'absolute',
        bottom:  Dimensions.get('window').height-tabBarHeight,
        left:0,
        right:0
    },
    labelStyle:{
      fontSize:15,
      color:"black"
    }
  }

您也可以在https://snack.expo.io/HkoC8SA0Q看到。