Question

<View style={{height: '100%', width: '100%'}}>
   {OtherContent}
   <ScrollView>
      <View style={{flexDirection: 'row', flexWrap: 'wrap', padding: 20}}>
           {children}
      </View>
   <ScrollView> 
</View>

我希望View内的ScrollView位于屏幕中央，而不更改其子级位置

孩子：

<View style={Styles.docsContainer}>
            {arr.map((document, index) => {
                return (
                    <TouchableOpacity key={index} style={[Style.docStyle} onPress={null}>
                        <Icon name='file-text-o'/>
                        <Text>{document.name}</Text>
                    </TouchableOpacity>
                );
            })}
</View>
const Styles: {
    docsContainer: {
       flexDirection: 'row',
       flexWrap: 'wrap',
       padding: 20,
    },
    docStyle: {
      alignItems: 'center', 
      padding: 20,
      margin: 5,
      marginBottom: 10,
      borderRadius: 8,
      width: 170
    }

}

Answer 1

实际上，我们不需要父级View，我们只需要scrollView作为flewGrow 1即可，这使scrollView在每个设备上都具有完整的高度和宽度。

我的方法：

   <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
    <View style={{
      alignItems: 'center',
      justifyContent: 'center',
      flex: 1,
    }}>
      <Text>mahesh nandam</Text>
    </View>
  </ScrollView>

尝试一下。

Answer 2

View是您ScrollView的直系子女。因此，您可以使用ScrollView为contentContainerStyle设置样式，并像这样在 center 中对齐它。

<View style={{height: '100%', width: '100%'}}>
    <ScrollView
         contentContainerStyle={{
             flexGrow: 1,
             justifyContent: 'center',
             alignItems: 'center',
         }}
    >
     <View style={{flexDirection: 'row', flexWrap: 'wrap', padding: 20}}>
         {children}
     </View>
    <ScrollView> 
</View>

我想这就是你想要的。

Answer 3

水平居中

如果只想将View水平居中，则可以将alignItems: 'center'设置为ScrollView的{{1}}。

contentContainerStyle

内部<View style={{ height: '100%', width: '100%' }}> <Text>Other content</Text> <ScrollView contentContainerStyle={{ alignItems: 'center' }}> <View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: 20, backgroundColor: 'red' }}> <Text>children</Text> </View> </ScrollView> </View>用红色突出显示。

水平和垂直居中

在这种情况下，您可以为同一View设置{ flex: 1, justifyContent: 'center', alignItems: 'center' }。

contentContainerStyle

如果您期望的布局与任一屏幕截图都不相同，请共享一个简单的布局草图。

如何在不更改儿童位置的情况下将视图与中心对齐？

3 个答案: