React native React本机映像全宽不使用“alignItems:'；中心'`

嗨，我正在与一个本地项目合作。我试图设置图像的宽度和屏幕的全宽。基于各种stackoverflow答案，我编写了以下代码

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
    alignSelf: 'stretch'
  },
  canvas: {
    flex: 1,
    width: null,
    height: null
  },
});

return (
    <View style={styles.container}>
      <Image
        resizeMode="cover"
        source={pic}
        style={styles.canvas} />
    </View>        
);

const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'行'，
为内容辩护：“中心”，
背景颜色：“#F5FCFF”，
自我定位：“伸展”
},
画布：{
弹性：1，
宽度：空，
高度：空
},
});
返回(
);

---

但是，当我在样式规则容器中添加以下规则时，

alignItems:“center”

。这些图片不再渲染了。我想知道为什么

alignItems:'center'

会阻止图片渲染？

您可以使用获取窗口的宽度和高度，请参见下面的示例

import {Dimensions} from 'react-native'
const { width, height } = Dimensions.get('window')

---

alignItems:'center'

没有预先确定的

宽度

/

高度

，因此必须在画布样式规则中指定

宽度

/

高度

，或者在同一规则中放置

alignSelf:'stretch'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
    alignSelf: 'stretch',
  },
  canvas: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
    height: null
  },
});

---

这对我来说完全有效，尽管我删除了null的宽度/高度，因为它阻止了图像显示（react native v0.40）