Javascript 反应本机滚动视图不工作_Javascript_React Native_Scrollview

Javascript 反应本机滚动视图不工作

javascript react-native

Javascript 反应本机滚动视图不工作,javascript,react-native,scrollview,Javascript,React Native,Scrollview,我有以下布局，当数据大于屏幕时需要滚动：图像： export default () => ( <Container hasNavBar={false}> <View style={{flex: 1}}> <View style={Styles.container}> <View style={{ flex: 1, backgroundColor: 'red', al

我有以下布局，当数据大于屏幕时需要滚动：

图像：

export default  () => (
  <Container hasNavBar={false}>
    <View style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </View>
  </Container>
);

export default  () => (
  <Container hasNavBar={false}>
    <ScrollView style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </ScrollView>
  </Container>
);

代码：

export default  () => (
  <Container hasNavBar={false}>
    <View style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </View>
  </Container>
);

export default  () => (
  <Container hasNavBar={false}>
    <ScrollView style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </ScrollView>
  </Container>
);

导出默认值（）=>(
一区
区域2
);

按照react native for add scroll的文档，我需要使用ScrollView组件创建布局的包装器，但添加ScrollView组件后，我的布局中断：

图像：

export default  () => (
  <Container hasNavBar={false}>
    <View style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </View>
  </Container>
);

export default  () => (
  <Container hasNavBar={false}>
    <ScrollView style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </ScrollView>
  </Container>
);

代码：

export default  () => (
  <Container hasNavBar={false}>
    <View style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </View>
  </Container>
);

export default  () => (
  <Container hasNavBar={false}>
    <ScrollView style={{flex: 1}}>
      <View style={Styles.container}>
        <View style={{
          flex: 1, backgroundColor: 'red',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 1</Text>
        </View>

        <View style={{
          flex: 2, backgroundColor: 'yellow',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text>Area 2</Text>
        </View>
      </View>

    </ScrollView>
  </Container>
);

导出默认值（）=>(
一区
区域2
);

容器组件

<View style={flex: 1}>
        {this.props.children}
        <DropdownAlert
          closeInterval={10000}
          updateStatusBar={false}
          ref={(ref) => this.dropdown = ref}
          onClose={() => null}/>
      </View>


{this.props.children}
this.dropdown=ref}
onClose={（）=>null}/>

如何解决它？

在重新阅读问题并更好地理解您的完整代码后，很明显，最快的解决方法是在区域1和区域2的视图上定义

minHeight

。我们可以从窗口的

维度计算它。这允许您以最少的内容获得33%/66%的比率，并根据需要使用其他内容扩展任一区域
将其放置在render（）的顶部：
const{height}=Dimensions.get（'window'）
添加到区域1的样式
minHeight:height/3

和2区的风格
minHeight：（height/3）*2
在重新阅读问题并更好地理解您的完整代码后，很明显，最快的解决方法是在区域1和区域2的视图上定义minHeight
。我们可以从窗口的维度计算它。这允许您以最少的内容获得33%/66%的比率，并根据需要使用其他内容扩展任一区域
将其放置在render（）的顶部：
const{height}=Dimensions.get（'window'）
添加到区域1的样式
minHeight:height/3

和2区的风格
最小高度：（高度/3）*2
什么是集装箱
？您确定它应该是顶级组件吗？@VojtaNovak I添加了容器组件代码，它是一个简单的包装器，用于在所有页面中添加全局警报，这些页面将成为您的子组件。请研究使用flexGrow:1
而不是flex:1
。flex
属性是flexGrow
和flexShrink
的缩写，后者可能会放弃您的设计我尝试使用flexGrow，但不适用于我的情况。什么是容器
？您确定它应该是顶级组件吗？@VojtaNovak I添加了容器组件代码，它是一个简单的包装器，用于在所有页面中添加全局警报，这些页面将成为您的子组件。请研究使用flexGrow:1
而不是flex:1
。flex
属性是flexGrow
和flexShrink
的简写，后者可能会放弃您的设计。我尝试使用flexGrow，但不适用于我的案例。style.container有一个{flex:1}，当我使用contentcontainersstyle时，布局不会给出滚动，但会在屏幕内进行调整，我希望内容有卷轴，我本来就误解了。检查当前答案。如果可以的话，我通常避免使用维度，但通常情况下，基于屏幕/窗口计算原始值以实现特定行为更容易。您可能还需要在minHeight计算中调整标题的高度。Styles.container有一个{flex:1}，当我使用contentContainerStyle时，布局不提供滚动，但在屏幕内进行调整，我希望内容有滚动。我最初误解了。检查当前答案。如果可以的话，我通常避免使用维度，但通常情况下，基于屏幕/窗口计算原始值以实现特定行为更容易。您可能还需要在最小高度计算中调整收割台的高度。