Question

当我像下面这个例子一样包装内容时，它会滚动完美..

return(
    <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        ...
    </ScrollView>
);

但是，每当我将它包装在另一个视图中时，它都不会滚动。

return(
    <View>
        <ScrollView>
            <Text> TEST </Text>
            <Text> TEST </Text>
            <Text> TEST </Text>
            <Text> TEST </Text>
            ...    
        </ScrollView>
    </View>
);

是否有某种解决方法。我试图在所有内容上方放置一个导航栏标题，但无法解决这个问题。

Answer 1

这是一个错字：您关闭的ScrollView代码是： </SCrollView>代替</ScrollView> 你需要在View容器中添加一个样式，所以你的代码必须是这样的：

return(
<View style={{flex: 1}}>
  <ScrollView>
    <Text> TEST </Text>
    <Text> TEST </Text>
    <Text> TEST </Text>
    <Text> TEST </Text>
       ...    
  </ScrollView>
</View>

);

Answer 2

尝试将style={{flex:1}}添加到<View>和<ScrollView>组件。您的代码也有拼写错误：第9行中的</SCrollView>。示例代码如下所示：

<View style={{backgroundColor:'white', flex:1}}>
    <NavigationBar title="Title" />
    <ScrollView style={{flex:1, backgroundColor:'white'}}>
            <View style={{flex:1,justifyContent:'center'}}>
                <RegisterForm />
            </View>
    </ScrollView>
</View>

Answer 3

另一种解决方案是将高度属性添加到父View容器。在计算屏幕高度的高度时，这有时很有效。

render () {
  const screenHeight = Dimensions.get('window').height

  return(
    <View style={{height: screenHeight}}>
      <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
           ...    
      </ScrollView>
    </View>
  )
}

Answer 4

尝试下一个代码：

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
  <Text> TEST </Text>
  <Text> TEST </Text>
  <Text> TEST </Text>
  <Text> TEST </Text>
</ScrollView>

Answer 5

如果您的 ScrollView 位于处理触摸的对象（Pressable、TouchableWithoutFeedback 等）中，那么您要么需要停止将触摸事件传播到该父处理程序，否则 {{ 1}} 不会处理触摸事件，因此不会滚动。

This can be done either with onStartShouldSetResponder={() => true} 或通过将子元素包装在一个本身处理触摸事件的元素中（例如 ScrollView）：

Pressable

Answer 6

正如@Evan Siroky上面回答的那样，它运作良好，我只是为自动高度添加了东西，以防您不想保留空间

render () {
  const screenHeight = Dimensions.get('window').height
  return(
    <View style={{ Height: "auto", maxHeight: screenHeight}}>
      <ScrollView>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
        <Text> TEST </Text>
           ...    
      </ScrollView>
    </View>
  )
}

Answer 7

我认为最好的方法是将所有需要放在一个数组中并映射这个数组。

const images = [
  require('../your/path/here'),
  require('../other/image/here'),
  ...
];

return ( {images.map((image) => <Image ... source={image} />)

请注意，如果您希望将其作为背景图像与图像上方的其他元素一起使用，您可以使用 BackgroundImage 并为每个图像渲染元素或定位图像映射的绝对位置并在所有事物后面对其进行 zIndex

Answer 8

我已经尝试了所有这些解决方案，但都没有奏效。然后我完全重新启动了应用程序和地铁服务器，一切正常。

Answer 9

将 Hybrid Android + react 应用程序的 NestedScrollEnabled 设置为 true，因为它可能存在手势/点击滚动问题。

Answer 10

我遇到了类似的问题，如果设置为“100%”，则通过删除高度/宽度来解决。

如果有人遇到同样的问题，请在此处添加。 :D

React-Native，滚动视图不滚动

10 个答案: