react-native - 如何在不改变 child 位置的情况下将 View 对齐到中心？

Question

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

我希望 ScrollView 中的 View 位于屏幕中央而不改变其子位置

children :

<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 as fledGrow 1 这使得 scrollView 具有根据设备的完整高度和宽度。

我的方法:

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

试试这个。