React-Native,滚动视图不滚动

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位于处理触摸（等）的内容中Pressable，TouchableWithoutFeedback那么您需要停止将触摸事件传播到该父处理程序，否则将ScrollView不会处理触摸事件，因此不会滚动。

onStartShouldSetResponder={() => true}这可以通过将子元素包装在一个本身处理触摸事件的元素中来完成Pressable（例如）：

return (
  <ScrollView>
    <Pressable>
      <Text>This is scrollable</Text>
    <Pressable>
    <Pressable>
      <Text>As is this</Text>
    <Pressable>
  </ScrollView>
);

Answer 2

这是一个错字:你的关键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 3

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

<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 4

另一种解决方案是在父视图容器中添加高度属性。在根据屏幕高度计算高度时，这有时效果很好。

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 5

尝试下一个代码：

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

Answer 6

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