如何在 react-navigation 中为自定义抽屉导航器设置背景图片

Question

我的问题是，我希望图像溢出抽屉并且不适合视图宽度

我使用 contentComponent 来创建自定义抽屉。

下面 link 中的答案显示了我想要实现的目标。但问题是，宽度和高度是以绝对值给出的值。这不适用于平板电脑、iPhone 和 android 手机。有什么想法吗？

export default StyleSheet.create({
  ...ApplicationStyles.screen,
  container: {
    //marginTop: Metrics.navBarHeight,
    flex: 1,
    flexDirection: 'column',
    alignItems: 'stretch',
  },
  contentContainer: {
    backgroundColor: 'transparent'
  },
  drawerImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    opacity: 0.05,
    backgroundColor: 'green'
    // resizeMode: "stretch"
  },


 render () {
    const { navigation } = this.props
    return (
      <View style={styles.container}>
        <Image source={Images.drawerBackground} style={styles.drawerImage}/>
        <ScrollView style={styles.contentContainer}>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerButton
              iconName='ios-map'
              text='Map'
              onPress={() => navigation.navigate('MapView')}
            />
            <DrawerButton
              iconName='md-trending-up'
              text='Elevation'
              onPress={() => navigation.navigate('Elevation')}
            />
            <DrawerButton
              iconName='md-people'
              text='Friends'
              onPress={() => navigation.navigate('Friends')}
            />
            <DrawerButton
              iconName='md-person'
              text='Profile'
              onPress={() => navigation.navigate('Profile')}
            />
            <DrawerButton
              iconName='md-settings'
              text='Settings'
              onPress={() => navigation.navigate('Settings')}
            />
            <View style={styles.checkinBtn}>
              <CheckinButton
                iconName='md-pin'
                text='Checkin Location'
                onPress={() => navigation.navigate('Settings')}
              />
            </View>
          </SafeAreaView>
        </ScrollView>
        <View style={styles.footer}>
          <Text style={styles.text}>
            ........
          </Text>
        </View>
      </View>
    )
  }
}

Answer 1

尝试使用 ImageBackground 而不是 Image 并将所有元素包装到其中参考官方文档here

Answer 2

import { ImageBackground } from "react-native";

 <ImageBackground source={require('../../assets/images/AImg.png')} style={{ width: 100, height: 100}}>

//ur view/text flows here.....

</ImageBackground>

导入并添加ImageBackground https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

如何在 react-navigation 中为自定义抽屉导航器设置背景图片

How do i set a background image to custom DrawerNavigator in react-navigation

react-native

react-navigation