React native 如何在React本机组件中将图像垂直对齐到顶部

我想在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'
  }
});

类布局扩展组件{
render（）{
返回(
左键
这是我的头衔
右键
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“白色”，
},
工具栏：{
背景颜色：“#B5AC3a”，
身高：64，
flexDirection:“行”
},
左：{
玛金托普：30，
尺寸：14，
textAlign:“中心”
},
对:{
玛金托普：30，
尺寸：14，
textAlign:“中心”
},
标题：{
玛金托普：30，
弹性：1，
尺寸：14，
textAlign:“中心”
},
内容：{
背景颜色：“#ffecff”
},
图片：{
宽度：尺寸。获取（'窗口'）。宽度-20，
差额：10，
alignSelf:“中心”
}
});

结果如下：

显然，我的图像和屏幕顶部之间有很大的空间。我试过：灵活启动。但是不起作用。我该怎么办？谢谢

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

类布局扩展组件{
render（）{
返回(
左键
这是我的头衔
右键
这是一号线
这是二号线
);
}
}

结果:

---

图像上的resizeMode='contain'与要在styles.image中定义的尺寸冲突。
只需删除

属性中的resizeMode='contain'，它就可以工作了

---

另外：我强烈建议您，根据您的尝试，当您有可扩展的内容（即任何不完全静态的内容）时，使用滚动视图而不是简单视图。这似乎是您所需要的。

换句话说，是否有类似“高度：自动”的功能？如果我删除resizeMode，我将如何设置缩放模式？您可以使用resizeMode或通过定义图像的尺寸来更改它，但如果您同时使用这两种功能，它们将产生冲突。