Question

我想在React-native中对齐我的图像。但不知道该怎么做。这是我的布局和风格：

class layout extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.toolbar}>
          <Text style={styles.left}>
            Left Button
          </Text>
          <Text style={styles.title}>
            This is my title
          </Text>
          <Text style={styles.right}>
            Right Button
          </Text>
        </View>
        <View style={styles.content}>
          <Image style={styles.image}
            source={require('./back.jpg')}
            resizeMode="contain"
          ></Image>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  toolbar: {
    backgroundColor: '#B5AC3a',
    height:64,
    flexDirection:'row'
  },
  left: {
    marginTop:30,
    fontSize: 14,
    textAlign: 'center'
  },
  right: {
    marginTop:30,
    fontSize: 14,
    textAlign: 'center'
  },
  title: {
    marginTop:30,
    flex: 1,
    fontSize: 14,
    textAlign: 'center'
  },
  content: {
    backgroundColor:'#ffecff'
  },
  image: {
    width: Dimensions.get('window').width - 20,
    margin: 10,
    alignSelf:'center'
  }
});

结果如下：

显然，我的图像与屏幕顶部之间有很大的空间。我试过了： flex-start 。但是不起作用。我该怎么办？感谢。

P.S：如果我使用查看代替图片，就可以了：

class layout extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.toolbar}>
          <Text style={styles.left}>
            Left Button
          </Text>
          <Text style={styles.title}>
            This is my title
          </Text>
          <Text style={styles.right}>
            Right Button
          </Text>
        </View>
        <View style={styles.content}>
          <View style={styles.messageBox}>
           <Text>This is line one</Text>
           <Text>This is line two</Text>
          </View>
        </View>
      </View>
    );
  }
}

结果：

Answer 1

你的resizeMode =＆＃39;包含＆＃39;在您的图像上与您要在styles.image中定义的尺寸冲突只需删除resizeMode =＆＃39;包含＆＃39;在<Image>属性中它应该有用。

还有别的东西：当你有可扩展的内容时，我会强烈建议你，根据你想要做的事情，使用ScrollView而不是简单的View（即任何不完全静态的东西）。这似乎是你需要的。

如何在我的React-native组件中将我的图像垂直对齐到顶部

1 个答案: