예를 들어 오른쪽에 띄우고 싶은 요소가 있습니다.
<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에는 이러한 개념이 없습니다.)div
span
텍스트를 어떻게 오른쪽에 띄우거나 정렬 할 수 있습니까?
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