Question

有人可以帮我弄清楚为什么我的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
      },
    });

Answer 1

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

Answer 2

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

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

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

ScrollView无法在Android上滚动

3 个答案: