Как выровнять вид по центру, не меняя положение детей?

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 только по горизонтали, вы можете установить alignItems: 'center' на ScrollView 's 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.

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

Если что выОжидайте, что макет отличается от любого из скриншотов. Пожалуйста, поделитесь простым эскизом макета.

Answer 3

View - ваши ближайшие дети ScrollView.Таким образом, вы можете использовать ScrollView с помощью contentContainerStyle и выровнять его по центру следующим образом.

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

Я думаю, это то, что вы ищите.