리액트 네이티브 뷰 내부 텍스트별 자동 너비

리액트 네이티브 뷰 내부 텍스트별 자동 너비

리액트 네이티브 스타일시트는 min-width/max-width 속성을 지원하지 않는 것으로 알고 있습니다.

안에 보기와 문자가 있습니다.자동 너비의 보기는 문자 요소를 상속해도 크기가 조정되지 않습니다.

이 문제를 해결하고 텍스트 너비를 사용하여 뷰 너비를 자동으로 설정하려면 어떻게 해야 합니까?

암호는 다음과 같습니다.

 <View style={{backgroundColor: '#000000'}}>
      <Text style={{color: '#ffffff'}}>Sample text here</Text>
 </View>

HTML/CSS의 공통점은 다음과 같습니다.

 <div style="background-color: #000; display: inline;">Sample text here</div>

주의: 부모 뷰의 플렉스:1은 도움이 되지 않습니다.텍스트는 다음과 같이 표시됩니다.

"Sam"
"ple"
"Tex"
"t"

"align Self"는 일반적인 HTML/CSS에서 "display: inline-block"과 같은 기능을 하며 매우 잘 작동합니다.

<View style={{backgroundColor: '#000000', alignSelf: 'flex-start' }}>
 <Text style={{color: '#ffffff'}}>
  Sample text here
 </Text>
</View>

두 가지 솔루션

텍스트 구성요소가 텍스트 컨텐츠에 적합합니다.

https://facebook.github.io/react-native/docs/text.html#containers

포장할 수 있습니다.<Text>컴포넌트를 다른 컴포넌트로 변환하다<Text>요소.

이렇게 하면 내부에 있는 모든 것이 플렉스박스 레이아웃이 아니라 텍스트 레이아웃을 사용하게 됩니다.

<Text>
   <Text>{'Your text here'}</Text>
</Text>

중첩된 텍스트 구성요소의 내용에 맞게 조정된 보기 컨테이너

그런 경우에는 소품을 사용해야 합니다.alignSelf컨테이너가 내용물의 크기로 축소되는 것을 보기 위해서입니다.

<View>
  <View style={{ alignSelf: 'center', padding: 12}} >
     <Text>{'Your text here'}</Text>
  </View>
</View>

tldr: 설정alignItems이외의 가치로'stretch'텍스트를 포함하는 보기의 상위 보기 스타일

고객이 직면한 문제는 React Native 기본값과 관련이 있을 수 있습니다.alignItems: 'stretch'에서<View />요소.기본적으로는 모두<View />요소가 기본적으로 자식에게 십자축을 따라 늘어나게 합니다(반대축).flexDirection설정alignItems이외의 가치로"stretch"상위 보기에서 "기준선", "플렉스-시작", "플렉스-엔드" 또는 "중앙"을 사용하면 이러한 동작을 방지하고 문제를 해결할 수 있습니다.

다음은 파란색 테두리가 있는 상위 보기 내부에 두 개의 보기 요소가 포함된 예입니다.두 개의 보기 요소 각각은 텍스트 요소로 둘러싸인 보기를 포함합니다.기본 스타일링을 사용하는 첫 번째 보기의 경우 노란색 하위 보기가 수평으로 확장되어 전체 너비를 채웁니다.두 번째 보기에서는alignItems: 'baseline'분홍색 보기는 확장되지 않고 하위 텍스트 요소의 크기를 유지합니다.

<View style={{ borderWidth: 5, borderColor: 'blue' }}>
    <View>
        <View style={{ backgroundColor: 'yellow' }}>
            <Text style={{ fontSize: 30 }}>Hello</Text>
        </View>
    </View>
    <View style={{ alignItems: 'baseline' }}>
        <View style={{ backgroundColor: 'pink' }}>
            <Text style={{ fontSize: 30 }}>Hello</Text>
        </View>
    </View>
</View>

그align-items여기에서는 부동산에 대해 잘 설명하고 있습니다.

너비를 적용하는 경우View에 기반을 둔<Text>, 다음과 같은 작업을 수행할 수 있습니다.

<View style={styles.container}>
   <Text>
     {text}
   </Text>
</View>

const styles = StyleSheet.create({
  container: {
    flexDirection:"row",
    alignSelf:"flex-start",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

작업 데모

난 이게 좋아.

<View style={{alignSelf: 'flex-start', backgroundColor: 'red'}}>
    <Text>abc</Text>
</View>

또는 간단하게:

  <Text style={{color: '#ffffff', alignSelf: 'center'}}>Sample text here</Text>

필요에 따라 다음 방법으로 시도해 보십시오.

여기서 내 키는 일정하고 글자 길이만큼 너비를 넓히고 있다.

  <View style={{flexDirection: 'row'}}>
    <View style={{
        height: 30, width: 'auto', justifyContent:'center', 
        alignItems: 'center'}}>

        <Text style={{color:'white'}}>Now View will enlarge byitself</Text>

    </View>
  </View>

높이와 너비 모두 보기 스타일 내부의 높이를 '자동' 전체 코드 아래로 변경해 보십시오.

  <View style={{flexDirection: 'row'}}>
    <View style={{
        height: 'auto', width: 'auto', justifyContent:'center', 
        alignItems: 'center'}}>

        <Text style={{color:'white'}}>Now View will enlarge byitself</Text>

    </View>
  </View>

또한 텍스트를 올바르게 정렬하기 위해 보기에 패딩 제공도 시도해 보십시오.

시야를 어딘가에 두고 싶지 않으면 니콜라스 답변과 함께 사용할 수 있습니다. 뷰 이이경음음음음음음음음음음음음음음음음음음음음음음음음음음음음음음을 설정할 수 .alignItems: 'center' ★★★★★★★★★★★★★★★★★★.

    <View style={{ flex: 1, alignItems: 'center' }}>
        <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'red' }}>
            <Text>{'Your text is here'}</Text>
        </View>
    </View>

내부 뷰의 크기를 표시하기 위해 배경색이 추가됩니다.

더하면 돼요.alignSelf

 <View style={{flex: 1}}>
   <Text style={{alignSelf: 'center'}}>{'Your text here'}</Text>       
   <Text style={{alignSelf: 'baseline'}}>{'Your text here'}</Text>       
   <Text style={{alignSelf: 'flex-end'}}>{'Your text here'}</Text>
   <Text style={{alignSelf: 'flex-start'}}>{'Your text here'}</Text>
 </View>

이것들은 나에게 효과가 있었다.

    <View style={styles.imageCancel}>
         <TouchableOpacity onPress={() => { this.setModalVisible(!this.state.visible) }}>
                 <Text style={styles.textCancel} >Close</Text>
          </TouchableOpacity>
    </View>
const styles = StyleSheet.create({
 imageCancel: {
         height: 'auto',
         width: 'auto',
         justifyContent:'center',
         backgroundColor: '#000000',
         alignItems: 'flex-end',
    },
     textCancel: {
        paddingTop:25,
        paddingRight:25,
        fontSize : 18,
        color : "#ffffff",
        height: 50,
        },
 }};

언급URL : https://stackoverflow.com/questions/38233789/react-native-view-auto-width-by-text-inside