React Native 中 ScrollView 被切断

Question

我遇到了问题。在 Android 和 iOS 上，ScrollView 在屏幕底部都会被切断。它是“不可滚动的”。我的代码相当简单：

 <View style={{ flex: 1 }}>
          <ScrollView style={styles.container}>
            <Image
              style={styles.image}
              source={{ uri: constants.media_url + "/" + data.img }}
            />

            <Text style={styles.title}>{data.heading}</Text>
            <Text style={styles.published_date}>{data.published_date}</Text>

            <Text style={styles.introduction}>
              {stripHTML(data.introduction)}
            </Text>
            <RenderHtml contentWidth={width} source={source} />
          </ScrollView>
        </View>

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background,
    padding: 10,
    flex: 1,
  },
  image: {
    width: "100%",
    maxHeight: 270,
    height: "100%",
  },
  title: {
    fontSize: 24,
    marginTop: 20,
    fontWeight: "bold",
  },
  introduction: {
    fontWeight: "bold",
  },
  text: {
    fontWeight: "normal",
    marginTop: 13,
  },
  published_date: {
    color: colors.gray,
    marginVertical: 10,
  },
});

正如你所看到的，我使用了弯曲技巧，我也尝试了填充，一切。它就是行不通。我在项目中只使用两个库：“react-native-render-html”：“^6.3.4”和React Navigation。

谢谢！

Answer 1

所以，经过几个小时的搜索和尝试，我确实做到了。

<View style={{ flex: 1 }}>
          <ScrollView
            style={styles.container}
            contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }}
          >
            <Image
              style={styles.image}
              source={{ uri: constants.media_url + "/" + data.img }}
            />

            <Text style={styles.title}>{data.heading}</Text>
            <Text style={styles.published_date}>{data.published_date}</Text>

            <Text style={styles.introduction}>
              {stripHTML(data.introduction)}
            </Text>
            <RenderHtml contentWidth={width} source={source} />
          </ScrollView>
        </View>

我改变的是我将

contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }}

添加到我的 ScrollView 组件中。对我来说300有效，也许你可以根据你的需要改变。

Answer 2

A solução acima funcionou para mim, obrigado！