реакции-навигация, как разместить tabBarNavigation поверх фона изображения

Question

Я пытаюсь установить tabBarNavigation поверх фона изображения, чтобы я мог видеть фон изображения через tabBar.Если я установлю position на absolute, я смогу увидеть фоновое изображение, но текст и 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.