Question

您好我正在使用本机反应项目。我试图设置图像的宽度有屏幕的全宽。基于各种stackoverflow答案和this github issue我写了以下代码

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

但是，我在样式规则容器中添加以下规则alignItems: 'center'的那一刻。这些图片不再呈现。我想知道为什么alignItems: 'center'会阻止图片呈现？

Answer 1

alignItems: 'center'没有预定的width / height，因此您必须在画布样式规则中指定width / height，或者在int he同样的规则放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
  },
});

Answer 2

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

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

使用`alignItems：＆＃39; center＆＃39;`来反映本机图像的全宽度

2 个答案: