React Native에서 어떻게 플로팅 할 수 있습니까?

예를 들어 오른쪽에 띄우고 싶은 요소가 있습니다.

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

어떻게 Text오른쪽에 띄울 수 있습니까? 또한 왜 "Hello"공간 대신에 Text전체 공간을 차지 View합니까?

왜 텍스트가 "Hello"공간 대신 ​​View의 전체 공간을 차지합니까?

때문에 View플렉스 컨테이너이며 기본적으로 가지고 flexDirection: 'column'와 alignItems: 'stretch'그 아이가 그 폭을 채우기 위해 뻗어해야한다고하는 수단.

(참고, 당 워드 프로세서 것을 모든 기본 반작용의 구성 요소는 display: 'flex'기본적으로 그것은 display: 'inline'전혀 존재하지 않는 이러한 방식으로,의 기본 동작. Text내 View에서이 기본 동작에서 기본 다르다 반응 span내에서 div웹; 후자의 경우, a 는 기본적으로 인라인 요소 이므로 span은 너비를 채우지 않습니다 . React Native에는 이러한 개념이 없습니다.)divspan

텍스트를 어떻게 오른쪽에 띄우거나 정렬 할 수 있습니까?

float속성은 네이티브 반응 존재하지 않지만, 거기에 로드 텍스트를 마우스 오른쪽 정렬하게됩니다 (약간 다른 행동을) 사용 가능한 옵션은. 내가 생각할 수있는 것들은 다음과 같습니다.

1. textAlign: 'right'온 Text요소

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(이 접근법은 Text채우기가 전체 너비를 채우는 사실을 변경하지는 않습니다 . View텍스트를 오른쪽 정렬합니다 Text.)

2. alignSelf: 'flex-end'온Text

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

이렇게하면 Text요소를 내용을 보유하는 데 필요한 크기로 축소하고 가로 방향 (기본적으로 가로 방향) 끝에 배치합니다 View.

3. alignItems: 'flex-end'온View

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

이는 alignSelf: 'flex-end'모든 View의 자녀에 대한 설정과 같습니다 .

4. flexDirection: 'row'와 justifyContent: 'flex-end'상의View

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row'레이아웃의 기본 방향을 세로 대신 가로로 설정합니다. justifyContent와 alignItems같지만 교차 방향 대신 기본 방향으로 정렬을 제어합니다.

5. flexDirection: 'row'온 View및 marginLeft: 'auto'온Text

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

이 접근법은 웹 및 실제 CSS와 관련하여 https://stackoverflow.com/a/34063808/1709587에서 설명 됩니다.

6. position: 'absolute'와 right: 0온 Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

실제 CSS에서와 같이 이것은 Text"흐름에서 벗어남"을 취합니다. 즉, 형제가 겹칠 수 있고 세로 위치는 View기본적으로 맨 위에 있습니다. View사용 top) 스타일 속성을.

당연히, 당신이 사용하고자하는이 다양한 접근 방법들 중 어느 것이 든 선택이 중요한지 여부는 당신의 정확한 상황에 달려 있습니다.

다음과 같이 항목의 정렬을 직접 지정할 수 있습니다.

textright: {    
  alignSelf: 'flex-end',  
},

저에게 alignItems부모님을 설정 하는 것은 다음과 같은 트릭을 수행했습니다.

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

React Native에서는 float를 사용하지 않아야합니다. React Native는 flexbox를 활용하여 모든 것을 처리합니다.

귀하의 경우 컨테이너에 속성이 있어야 할 것입니다

justifyContent: 'flex-end'

그리고 전체 공간을 차지하는 텍스트에 대해 다시 컨테이너를 살펴볼 필요가 있습니다.

다음은 flexbox에 대한 훌륭한 가이드 링크입니다. Flexbox에 대한 완전한 안내서

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: 가로 (행) 또는 세로 (열)로 이동하려는 경우

justifyContent: 이동하려는 방향.

flex :

 <View style={{flex: 1, flexDirection: 'row'}}>
        <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>

자세한 내용은 https://facebook.github.io/react-native/docs/flexbox.html#flex-direction