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

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: 如果我像这样使用 View 而不是 Image 就好了:

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='contain' 与您要在 styles.image 中定义的尺寸冲突。
只需删除 <Image> 中的 resizeMode='contain'属性，它应该可以工作。

其他:我强烈建议您在拥有可扩展内容(即任何非完全静态的内容)时使用 ScrollView 而不是简单的 View，具体取决于您的尝试。这似乎是您所需要的。