与滚动型和Flexbox的问题

Question

我试图滚动型添加到我的组件，但是，因为我需要它这是行不通的。这一切行动顶端。

这是我的屏幕滚动型加入之前，我需要的屏幕看起来是这样，但随着滚动选项：

这是加入滚动型后，我的屏幕：

这是我的代码：

<ScrollView contentContainerStyle={styles.scrollview} scrollEnabled={scrollEnabled} onContentSizeChange={this.onContentSizeChange}>
    <View style={styles.mainContainer}>
      <View style={[styles.petNameContainer]}>
        <Text>{this.state.petInfo.name}</Text>
      </View>
      <View style={styles.petProfileContainer}>
        <Text style={{textAlign:'left'}}>{this.state.petInfo.race}</Text>
        <Image style={{height:100, width:100}}
          // en local --> source={require('../assets/images/homescreen/Avatar.png')}>
          source={{uri:this.state.petInfo.url_image}}
        />
        <Text style={{textAlign:'right'}}>{this.state.petInfo.species}</Text>
      </View>
      <View style={styles.foodBar}>
        <Image style={{height: 40, width:250}}
          resizeMode="stretch"
          source={require('../assets/images/homescreen/Comida.png')}>
        </Image>
      </View>
      <View style={[styles.prueba]}>
        <Text>15:30 - Última entrada del log</Text>
        <Text>21:30 - Próxima comida.</Text>
        <Text>Icono + Historial de comidas</Text>
      </View>
      <View style={[styles.quarterHeight]}>
        <Image
          style={{height: 40, width:250}}
          resizeMode="stretch"
          source={require('../assets/images/homescreen/Agua.png')}>
        </Image>
      </View>
      <View style={[styles.quarterHeight]}>
        <Text>15:30 - Última entrada del log</Text>
        <Text>Icono + Historial de agua</Text>
        <Text>15:30 - Última entrada del log</Text>
        <Text>Icono + Historial de agua</Text>
        <Text>15:30 - Última entrada del log</Text>
        <Text>Icono + Historial de agua</Text>
        <Text>15:30 - Última entrada del log</Text>
        <Text>Icono + Historial de agua</Text>
        <Text>15:30 - Última entrada del log</Text>
        <Text>Icono + Historial de agua</Text>
      </View>
    </View>
    </ScrollView>

样式：

const styles = StyleSheet.create({
mainContainer: {
  flex: 1,
  flexDirection: 'column',
  justifyContent: 'space-between',
  alignItems: 'center',
  flexWrap: 'wrap'
  },
  petNameContainer: {
  flex: 1,     
 },
 quarterHeight: {
  flex: 1,
},
prueba: {
flex:1
},
petProfileContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: 2,
marginTop: -95 
},
foodBar: {
flex:1
}
});

我是新来本地做出反应，所以我不知道该怎么做。

Answer 1

只是删除您marginTop: -95风格petProfileContainer。