代码之家  ›  专栏  ›  技术社区  ›  ThinkAndCode

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

  •  3
  • ThinkAndCode  · 技术社区  · 6 年前
    <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
        }
    

    }

    3 回复  |  直到 6 年前
        1
  •  3
  •   Nandam Mahesh    6 年前

    事实上,我们不需要父视图,我们只需要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>
    

    试试这个。

        2
  •  1
  •   Arpit Kapadia    6 年前

    这个 View 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>
    

        3
  •  1
  •   vahissan    6 年前

    水平居中

    View 水平方向,可以设置 alignItems: 'center' ScrollView 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>
    

    内在的 查看

    center horizontally

    在这种情况下,您可以设置 { flex: 1, justifyContent: 'center', alignItems: 'center' } 同样的道理 内容容器样式 .

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

    center horizontally and vertically

    如果你所期望的是不同的布局比在任何一个截图,请分享一个简单的草图布局。