리액트 네이티브는 왜 자신을 정당화하지 않는가?

리액트 네이티브는 왜 자신을 정당화하지 않는가?

항목을 기본 축에 정렬하려고 합니다.예를 들어, 몇 명의 아이들이 모두 왼쪽으로 정렬하고 한 명의 아이들이 오른쪽으로 정렬하는 열을 만들고 싶습니다.

: , 방법으로 를 얻을 수 , '직장: 절대, 오른쪽: 0'이 더 할 것 justifySelf축에서의 는 1차 축에서의 에 영향을 주는 것과 .alignSelf보조 축에서 한 아이의 정렬에 영향을 줍니다.

그런 것은 .justifySelf존재하는 것 같다.★★★★★★★★★★★★★★★★?

이것은 이 질문과 비슷하지만 완전히 비슷하지는 않습니다.리액트 네이티브로 뜨려면 어떻게 해야 하나요?

리액트 네이티브는 몰라도 플렉스박스는 알아요!

다음 코드를 참고하십시오.

<div style="display: flex;">

  <div>
    I'll be on the left side
  </div>
  <div>
    I'll be hugging the guy on the left side
  </div>
  <div>
    I'll be hugging the guy hugging the guy on the left side
  </div>
  <div style="margin-left: auto;">
    I'll be hugging the right side far away from those other guys
  </div>

</div>

마지막 아이에 설정된 여백은 다른 모든 아이들을 자신의 스타일이 허용하는 한 왼쪽으로 밀어내고 다른 스타일이 허용하는 한 오른쪽으로 밀어 넣습니다.

해서 볼수 있습니다.margin-right: auto;첫 번째 세 아이가 할당된 공간을 차지하고 나면 마지막 아이가 부모 div의 남은 공간에 완벽하게 집중되는 것을 볼 수 있습니다.이것은 경쟁하는 "마진 오토"가 서로를 상쇄할 수 없고 서로 덮어쓰지 않기 때문에, 두 가지 모두 남은 모든 공간을 동등하게 공유할 것이기 때문이다.

여백 하도록 설계되어 있기 에 플렉스 박스와 하십시오.justify-content★★★★★★★★★★★★★★★★★★.

도움이 되는 기사: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

나는 당신이 다음과 같은 것을 성취하고 싶어한다고 믿는다.

뷰를 할 수 .justifyContent★★★★★★★★★★★★★★★★★★.

  <View style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  }}>
    <View>
      <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    </View>
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  </View>

인 답변: 없다.justifySelf액액 in in가 없기 justify-self실제 CSS에서 flexbox를 사용할 수 있습니다.CSS 속성은 있지만 플렉스박스 레이아웃에서는 아무것도 하지 않습니다.https://drafts.csswg.org/css-align-3/ #http://https://drafts.csswg.org/css-align-3/ 의 스펙에 기재되어 있는 것을 확인할 수 있습니다.justify-self적용 대상으로 정의되어 있습니다.

블록 수준 상자, 절대 위치 상자 및 그리드 항목

특히 '플렉스 아이템'은 포함되지 않습니다.

좋습니다. 하지만 CSS에서는 왜 이런 상황이 발생합니까? MDN에서는 다음과 같은 설명을 제공합니다.

플렉스박스에는 정당성이 없다

주요 축에서는 Flexbox가 우리의 콘텐츠를 그룹으로 취급합니다.아이템 레이아웃에 필요한 공간이 계산되고 남은 공간은 분배에 사용할 수중에 있습니다.justify-content속성은 남은 공간의 사용 방법을 제어합니다. ★★justify-content: flex-end되어 있습니다.justify-content: space-around아이템의 양쪽에 그 치수 등에 배치되어 있습니다.

, a, a가justify-selfFlexbox에서는 항상 아이템 그룹 전체를 이동시키기 때문에 속성이 의미가 없습니다.

십자축상align-self이 치수의 플렉스 컨테이너에 추가 공간이 있을 수 있으므로 하나의 항목을 시작과 끝으로 이동할 수 있습니다.

확실히 일리가 있네요.alignSelf: 'center'플렉스 항목에서 십자축의 중심에 오도록 요청합니다. 예를 지, 를, 떤, 떤, 미, 미, 미, 미, 미, 미, 미, 미, 미, 미, 미, but, but, but, but, ,justifySelf: 'center'플렉스 아이템에 대해서, 주축의 중심을 맞추도록 요구하기 위해서?이전 플렉스 아이템이 이미 해당 축을 따라 공간의 절반 이상을 채웠다면 어떻게 대처해야 할까요?

여백은 귀사와 같은 경우에 적합한 솔루션을 제공합니다. justifySelf플렉스박스는 플렉스박스가 플렉스박스이기 할 수 없습니다.justifyContent값은 플렉시블 아이템의 배포 방법을 지정합니다.대신 그것들을 개별적으로 지정한 아이템에 적용하는 것은 무엇을 의미하는지 생각해 보면 기본적으로 일관성이 없다는 것을 알 수 있습니다.

높이를 달리하는 모든 항목이 Y축에 적절하게 정렬되어 있을 때 예상대로 작동하는 절대적인 위치 지정 없이 이를 수행할 수 있는 쉬운 방법이 있습니다.

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <View style={{ backgroundColor: 'green', height: 50, width: 50 }} />
  <Text style={{flex: 1}}> text in here because why not!</Text>
  <View style={{ backgroundColor: 'yellow', width: 30, height: 30 }} />
</View>

Flex Docs를 보실 수 있습니다.

구성요소 스타일에 flexDirection을 추가하면 레이아웃의 기본 축이 결정됩니다.

그 후:

구성요소 스타일에 alignItems를 추가하면 보조 축을 따라 하위 축의 정렬이 결정됩니다(기본 축이 행이면 보조 축이 열이고 그 반대도 마찬가지임).

원하는 코드는 다음과 같습니다.

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

갱신하다

다음과 같은 이미지를 의미하는 경우:

그럼 이렇게 하죠.

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

class Playground extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.boxes} />
        <View style={styles.boxes} />
        <View
          style={[
            styles.boxes,
            {
              backgroundColor: "crimson",
              position: "absolute",
              right: 0
            }
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  boxes: {
    width: 50,
    height: 50,
    marginLeft: 1, // to separate each box!
    backgroundColor: "steelblue"
  }
});

export default Playground;

이 소품들이 내가 아는 한, 그게 가장 좋은 방법이야!

게 제일 은 지금 되어 있는 걸 예요.<View>position: "absolute"및를 추가합니다.position: "absolute"원하는 요소로 이동합니다. 다음, 이 안쪽에<View>, 더하다justifyContent: "center", ★★★★★★★★★★★★★★★★★」alignItems: "center"이걸로 문제가 해결됐으면 좋겠네요

언급URL : https://stackoverflow.com/questions/50847577/why-does-react-native-not-offer-a-justify-self