ScrollView 和 Flexbox 的问题答案

【问题标题】：Problems with ScrollView and FlexboxScrollView 和 Flexbox 的问题
【发布时间】：2019-06-27 00:25:45
【问题描述】：

我尝试将 ScrollView 添加到我的组件中，但它没有按我的需要工作。它将所有内容移到顶部。

这是我添加 ScrollView 之前的屏幕，我需要屏幕看起来像这样，但带有滚动选项：

这是我添加 ScrollView 后的屏幕：

这是我的代码：

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

我是 React Native 的新手，所以我不知道该怎么做。

【问题讨论】：

我看不到滚动视图的样式。您已将其定义为 styles.scrollview 。只需将 flexGrow:1 添加到 styles.scrollView 样式对象。我也不知道你为什么对许多对象使用 flex:1。在我看来这是不必要的，但只有你知道你要完成什么。

标签： reactjs react-native flexbox scrollview

【解决方案1】：

只需从您的petProfileContainer 样式中删除marginTop: -95。

【讨论】：