React Native，如何使滚动视图加载最低全屏没有滚动条，但随着内容增长滚动

Question

我有一个ScrollView是有问题的，因为我需要把一个底部边框，所以我需要它加载最初的全屏，但是当添加<ErrorSection />组件时，能够让ScrollView自动增加高度。

它似乎不适用于flex: 1，所以我试图明确声明ScrollView的height和width，但这也会产生不可预知的结果。

这里是我的滚动型电流代码：

import React from 'react' 
import { StyleSheet, ScrollView, Dimensions } from 'react-native' 
import * as Animatable from 'react-native-animatable' 

const E1ScrollView = ({ children, animation, style, bottomBorder }) => { 
    const { container, E1bottomBorder } = styles 

    const { height, width } = Dimensions.get('window') 
    // const pxHeight = height * PixelRatio.get() 
    // const pxWidth = width * PixelRatio.get() 

    return (
     <ScrollView style={[container, style]}> 
      <Animatable.View 
       style={[{ height, width }, (bottomBorder) ? E1bottomBorder : null]} 
       animation={animation} 
       iterationCount={1}> 

       {children} 
      </Animatable.View> 
     </ScrollView> 
    ) 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: '#F0F0F0', 
     flexDirection: 'column' 
    }, 
    E1bottomBorder: { 
     borderBottomWidth: 5, 
     borderColor: '#DD0426', 
    } 
}) 

export { E1ScrollView } 

Answer 1

我有很多的研究后解决了这个。这里是我的滚动视图组件功能齐全：

import React from 'react' 
import { StyleSheet, ScrollView } from 'react-native' 
import * as Animatable from 'react-native-animatable' 

const E1ScrollView = ({ children, animation, bottomBorder, style }) => { 
    const { container, E1bottomBorder } = styles 

    // the key is flexGrow: 1 on the ScrollView (and contentContainerStyle) 
    // The wrapped <View /> should be flex: 1 
    return (
     <ScrollView 
      contentContainerStyle={{ flexGrow: 1 }} 
      scrollEnabled> 

      <Animatable.View 
       style={[container, (bottomBorder) ? E1bottomBorder : null, style]} 
       animation={animation} 
       iterationCount={1}> 

       {children} 
      </Animatable.View> 
     </ScrollView> 
    ) 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: '#F0F0F0', 
     flexDirection: 'column' 
    }, 
    E1bottomBorder: { 
     borderBottomWidth: 5, 
     borderColor: '#DD0426', 
    } 
}) 

export { E1ScrollView } 

如果你想品尝它，只需导入到“共同”组件的任何屏幕上，您打算使用它，这样做：

import { E1ScrollView } from '../common' 
// ... 
// Notice how you can overwrite styles by adding style={{ backgroundColor: 'red' }} to <E1ScrollView /> 
return (
    <E1ScrollView animation="fadeIn" bottomBorder> 
     <View style={{ flex: 0 }}><Text>test</Text></View> 
     <View style={{ flex: 0, flexDirection: 'column' }}> 
      <Text>test</Text> 
      <Text>test</Text> 
      <Text>test</Text> 
     </View> 
     <View style={{ flex: 1 }} /> 
     <View style={{ flex: 0 }}><Text>test</Text></View> 
    </E1ScrollView> 
) 

我想确保您知道的部分是您可以创建<CardSection />查看具有flex: 0或flex: 1样式的元素，您将可以轻松地进行堆叠。然后，你只需要使用边距和填充。

我在上面演示的<View style={{ flex: 1 }} />元素是一个关键的设计元素，需要注意的是，在我看来。我发现它在我的旅程中，它使填充区域很容易。

如果您的屏幕接收到添加DOM元素的道具，您的视图将以预期的方式进行响应。