如何在反应导航中将背景图像设置为自定义 DrawerNavigator答案

【问题标题】：How do i set a background image to custom DrawerNavigator in react-navigation如何在反应导航中将背景图像设置为自定义 DrawerNavigator
【发布时间】：2018-05-25 18:15:39
【问题描述】：

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

我使用 contentComponent 来自定义 Drawer。

下面链接中的答案显示了我想要实现的目标。但问题是，宽度和高度是绝对值价值观。这不适用于平板电脑、iphone 和安卓手机。有什么想法吗？

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>
    )
  }
}

How to set a background Image of Navigator in React-Native

【问题讨论】：

你能贴一些代码和溢出图像的截图吗？
有帮助吗？我只是结合了样式表和渲染函数。
尝试使用ImageBackground 而不是Image 并将所有元素包装到其中facebook.github.io/react-native/docs/…
我已经尝试过 ImageBackground，它适用于 Android 和 IOS。如果您将其作为答案，我可以将其标记为已接受；-) 谢谢顺便说一句

标签： react-native react-navigation

【解决方案1】：

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

【讨论】：

【解决方案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

【讨论】：

一般来说，如果答案包含对代码的用途的解释，以及为什么在不介绍其他人的情况下解决问题的原因，答案会更有帮助。