ScrollView 不会在 android 上滚动答案

【问题标题】：ScrollView doesn't scroll on androidScrollView 不会在 android 上滚动
【发布时间】：2019-02-16 19:14:37
【问题描述】：

谁能帮我弄清楚为什么我的 scrollView 只适用于 ios 而不适用于 android？我正在使用 React Native，这个问题之前发生过，但是通过删除容器的 flex 值解决了这个问题，但这次我无法真正解决它非常感谢您的所有帮助！

  render() {
    return (
        <View style={styles.container}>

            <ScrollView showsVerticalScrollIndicator={false}>
                <Text style={styles.title}>REVIEWS 2</Text>
                <View style={styles.informationBox}>
                  <View style={styles.informationRow}>
                    <Text style={styles.reviewText}>Traveler Rating</Text>
                    <Rating type="custom" style={{alignSelf: 'center', paddingLeft: 10}} imageSize={20} readonly startingValue={3}
                      ratingBackgroundColor= "#e9e9f1" ratingColor="#f7c66c"/>
                  </View>
                  <View style={styles.divider}></View>
                  <View style={styles.informationRow}>
                  <Text style={styles.reviewText}>Shipper Rating</Text>
                  <Rating type="custom" style={{alignSelf: 'center', paddingLeft: 10}} imageSize={20} readonly startingValue={0}
                    ratingBackgroundColor= "#e9e9f1" ratingColor="#f7c66c"/>
                  </View>
                </View>
            </ScrollView>
            </View>
        </View>
    );
  }
}

这里是用于这个特定屏幕的样式

   const styles = StyleSheet.create({
        container: {
        backgroundColor: '#28243c',
        flex:1,
        paddingBottom: (Platform.OS == 'android' ? 20 : 0)
      },       
      userStatsContainer: {
        paddingTop: 10,
        flexDirection: 'row',
        justifyContent: 'center'
      },
      userStatsItem: {
        flexDirection: 'row',
        paddingRight: 10,
        alignSelf: 'center'
      },
      standAloneUserStatsItem : {
        flexDirection: 'row',
        paddingTop: 10,
        alignSelf: 'center'
      },
      userStatsTitle: {
        alignSelf:'center',
        color: 'white',
        paddingLeft: 5,
        fontFamily: 'SF-medium'
      },
      title: {
        color: '#f7c66c',
        fontFamily: 'SF-bold',
        fontSize: 20,
        paddingTop: 30,
        alignSelf: 'center'
      },
      informationBox: {
        marginTop: 10,
        backgroundColor: '#41436c',
        width: '80%',
        alignSelf: 'center'
      },
      informationRow: {
        padding:10,
        flexDirection: 'row'
      },
      reviewText: {
        color: 'white',
        fontFamily: 'SF-medium',
        flex: 1
      },
    });

【问题讨论】：

滚动视图之后没有额外的视图吗？我从没有视图中看到一个结束标记

标签： javascript android react-native

【解决方案1】：

ScrollView 可能只有 1 个孩子。类似于 LinearLayout 或 ContraintLayout 的东西，然后包装实际内容。

【讨论】：

【解决方案2】：

将flex:1添加到你的ScrollView，只要数据足够长，你应该可以滚动。我在下面的小吃中使用了你的代码，

https://snack.expo.io/@spacechimp/petrified-waffles

【讨论】：

【解决方案3】：

两者都适用：

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.informationBox}>
            <Text style={styles.title}>REVIEWS 2</Text>
            <View style={styles.informationRow}>
              <Text style={styles.reviewText}>Traveler Rating</Text>
              <View style={styles.ratingView} />
            </View>
            <View style={styles.divider} />
            <View style={styles.informationRow}>
              <Text style={styles.reviewText}>Shipper Rating</Text>
              <View style={styles.ratingView} />
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#28243c',
    flex: 1,
    paddingBottom: Platform.OS == 'android' ? 20 : 0
  },
  userStatsContainer: {
    paddingTop: 10,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  userStatsItem: {
    flexDirection: 'row',
    paddingRight: 10,
    alignSelf: 'center'
  },
  standAloneUserStatsItem: {
    flexDirection: 'row',
    paddingTop: 10,
    alignSelf: 'center'
  },
  userStatsTitle: {
    alignSelf: 'center',
    color: 'white',
    paddingLeft: 5
  },
  title: {
    color: '#f7c66c',
    fontSize: 20,
    paddingTop: 30,
    alignSelf: 'center'
  },
  informationBox: {
    marginTop: 10,
    backgroundColor: '#41436c',
    width: '80%',
    alignSelf: 'center'
  },
  informationRow: {
    padding: 10,
    flexDirection: 'row'
  },
  reviewText: {
    color: 'white',
    flex: 1
  },
  ratingView: {
    width: 100,
    height: 300,
    backgroundColor: 'red'
  }
});

【讨论】：