네이티브 텍스트가 내 화면에서 지워지고 포장을 거부합니다.무엇을 해야 하나?

네이티브 텍스트가 내 화면에서 지워지고 포장을 거부합니다.무엇을 해야 하나?

이 라이브 예에서 다음 코드를 찾을 수 있습니다.

다음과 같은 반응 원소가 있습니다.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return      (
  <View style={styles.container}>

        <View style={styles.descriptionContainerVer}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >
              Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
            </Text>
          </View>
        </View>

        <View style={styles.descriptionContainerVer2}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
          </View>
        </View>



  </View>);
  }
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

다음 스타일을 사용합니다.

var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    //width: 200, //I DON\'T want this line here, because I need to support many screen sizes
    flex: 0.3,  //width (according to its parent)
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap'
  }
});

그러면 다음 화면이 나타납니다.

텍스트가 화면 밖으로 나가는 것을 방지하고 부모 80%의 너비로 화면 중앙에 제한하려면 어떻게 해야 합니까?

안 쓸 것 같아width 다른 는 전적으로 한다.flexbox

이 내가 (이유는)를 된였다.flex: 0.8의 범위 내에서descriptionContainerHor.

제가 이루고 싶은 것은 다음과 같습니다.

감사해요!

아래 링크에서 해결책을 찾았습니다.

[텍스트] 텍스트가 줄지 않음 #1438

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

Github profile 사용자 링크는 다음과 같습니다.

앨리 리플리

---

편집 : 2019년 4월 9일 (화)

@@sudoPlz와 됩니다.flexShrink: 1을 사용하다

은 「」입니다.flexShrink: 1.

<View
    style={{ flexDirection: 'row' }}
> 
   <Text style={{ flexShrink: 1 }}>
       Really really long text...
   </Text>
</View>

, 「어느쪽인가」, 「어느쪽인가」를 추가할 .flexShrink: 1<View>님의 부모도, 이 기능을 발휘하려면 , 이것만 가지고 놀면, 할 수 있습니다.

그 해답은 아담 피에트라시아크에 의해 이 스레드에서 발견되었다.

이것은 기존의 버그입니다. flexWrap: 'wrap'이 해결책은 에게 효과가 것 같다.

코드

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

스타일

export default StyleSheet.create({
    container: {
        width: 0,
        flexGrow: 1,
        flex: 1,
    }
});

.<Text>하다

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>

이건 내게 효과가 있었다.

<View style={{flexShrink:1}}>
  <Text>some long random text...</Text>
</View>

의 경우, 이 는 '어울릴 때'를 할 때 볼 수 있습니다.flexDirection: 'row'다른 경우에는 적절하게 처리되기 때문입니다.

텍스트의 올바른 랩핑 방법은 다음과 같습니다.

첫 번째 방법:

남기지 , .<Text>;

<Text style={{width: "60%"}}>some long text goes here ...</Text>

위의 코드는 텍스트의 너비를 사용 가능한 너비의 60%로 제한하며, 텍스트 전체가 해당 너비에 맞지 않으면 텍스트가 자동으로 줄바꿈됩니다. 즉, 나머지 텍스트는 다음 줄로 이동합니다.

두 번째 방법

설정하다flexShrink: 1텍스트 요소 및 텍스트 요소를 래핑하는 상위 요소에서 모두 사용할 수 있습니다.

예,

<View style={{ flexShrink: 1, justifyContent: 'space-between', alignItems: 'center', flex: 1, flexDirection: 'row'}}>
    <Text>First long string which goes long....</Text>
    <Text style={{flexShrink: 1}}>This is a long long text which must go out of the screen if we dont style it properly and not do some logic here</Text>
</View>

다른 스타일은 결과가 제대로 작동하고 있음을 보여주기 위한 것입니다. flexShrink: 1필요한 건 그것뿐이에요

이 문제에 대한 또 다른 해결 방법은 텍스트를 보기 안에 래핑하는 것입니다.또한 보기의 스타일을 flex: 1로 설정합니다.

떼면 효과가 있어요.flexDirection: row부에서descriptionContainerVer ★★★★★★★★★★★★★★★★★」descriptionContainerVer2각각 다음과 같다.각각 다음과 같다.

업데이트(댓글 참조)

나는 당신이 그 후에 당신이 생각하는 것을 이루기 위해 몇 가지 변화를 만들었습니다.네가 원하는 걸 이루기 위해 몇 가지 변화를 줬어 First of all I removed the 우선은 제가 제거했습니다.descriptionContainerHor요소.요소. Then I set the 그리고 나서,flexDirection of the vertical views to 수직 뷰의row라고 덧붙였습니다.alignItems: 'center' ★★★★★★★★★★★★★★★★★」justifyContent: 'center'Ver이에서

내용물을 세로 및 가로로 정렬하고 x축을 따라 쌓는 래퍼 뷰가 있습니다. 눈에 보이지 않는 두 됩니다.View과 Text컴포넌트를 사용하여 패딩을 수행합니다.

다음과 같이 합니다.

<View style={styles.descriptionContainer}>
  <View style={styles.padding}/>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
    </Text>
  <View style={styles.padding}/>
</View>

그리고 이것은:

descriptionContainer:{
  flex:0.5, //height (according to its parent),
  flexDirection: 'row',
  backgroundColor: 'blue',
  alignItems: 'center',
  justifyContent: 'center',
  // alignSelf: 'center',
},
padding: {
  flex: 0.1
},
descriptionText: {
  backgroundColor: 'green',//Colors.transparentColor,
  fontSize: 16,
  flex: 0.8,
  color: 'white',
  textAlign: 'center',
  flexWrap: 'wrap'
},

그럼 네가 노리고 있던 걸 알게 되겠군

한층 더 개선

파란색 및 주황색 보기 내에 여러 텍스트 영역을 쌓으려면 다음과 같이 하십시오.

<View style={styles.descriptionContainer2}>
  <View style={styles.padding}/>
  <View style={styles.textWrap}>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Some other long text which you can still do nothing about.. Off the screen we go then.
    </Text>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Another column of text.
    </Text>
  </View>
  <View style={styles.padding}/>
</View>

서 ★★★★★textWrap합니다.

textWrap: {
  flexDirection: 'column',
  flex: 0.8
},

이게 도움이 됐으면 좋겠네요!

<View style={{flexDirection:'row'}}> 
  <Text style={{flex: 1, flexWrap: 'wrap'}}> 

이거면 될 거야

같은 문제가 있어서 수정하기 위해 모든 View의 부모에게 style=flex: 1}을(를) 가지고 있는지 확인해야 했습니다.

위의 답변 중 많은 것을 시도해 봤지만, 어느 것도 효과가 없었습니다.나는 그것을 넣음으로써 최고의 결과를 얻었다.flexShrink Text와 '''의flexGrow View 및Text★★★★★★ 。

는 ★★★★★★★★★★★★가 필요했다.flexDirection: row을

<View style={flexDirection: 'row', flexGrow: 1}>
    <Text style={
        flexGrow: 1, 
        flexShrink: 1, 
        paddingLeft: 16,
        paddingRight: 8,
        alignItems: 'center',
    }>
        A long text that needs to wrap into multiple lines
    </Text>
</View>
<Image source={rightArrow}/>

다음과 같습니다.

React Native 버전 0.62.2에서는 "Text"의 Container에 "flex-shrink: 1"을 넣었을 뿐이지만, "View of Container"의 flex-direction:row는 기억하십시오.도와주셔서 감사합니다.

내 코드:

export const Product = styled.View`
  background: #fff;
  padding: 15px 10px;
  border-radius: 5px;
  margin: 5px;
  flex-direction: row;
`;

export const ProductTitleContainer = styled.View`
  font-size: 16px;
  margin-left: 5px;
  flex-shrink: 1;
`;

export const ProductTitle = styled.Text`
  font-size: 16px;
  flex-wrap: wrap;
`;
`;

같은 문제를 안고 있다는 것을 덧붙이고 싶었지만 flexWrap, flex:1 (텍스트 컴포넌트에서는) flex가 작동하지 않았습니다.

결국, 나는 내 텍스트 컴포넌트의 래퍼의 폭을 디바이스의 폭에 맞추었고, 텍스트는 래핑을 시작했다. const win = Dimensions.get('window');

<View style={{
  flex: 1,
  flexDirection: 'column',
  justifyContent: 'center',
  alignSelf: 'center',
  width: win.width
}}>
  <Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
  <Text style={{ alignSelf: 'center' }}>{image.description}</Text>
</View>

이런 것도 할 수 있을 것 같아요.더 나은 아이디어를 위해 코드 첨부 사진을 첨부했습니다.

다음과 같은 작업을 수행할 수 있습니다.

TermsOfService = {
  fontFamily: 'Verlag-Book';
  fontSize: 14px;
  textAlign: center;
},
HighlightedText = {
  font-family: 'Verlag-Book';
  font-size: 14px;
  text-align: center;
  color: ${COLORS.PRIMARY_ADMIRAL_BLUE};
},
Container: {
  width: 100%;
  alignSelf: center;
  alignItems: center;
  justifyContent: center;
  flexDirection: row;
  flexWrap: wrap;
}

컴포넌트는 다음과 같이 사용합니까?

 <View style={Container}>
   <Text style={TermsOfService}>By joining, you agree to the some thing </Text>
   <Text style={HighlightedText}>this is highlighted </Text>
   <Text style={TermsOfService}>and </Text>
   <Text style={HighlightedText}>and this as well</Text>
 </View>

<View style={{flexDirection:'row'}}> 
   <Text style={{ flex: number }}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

{ flex: aNumber }만 있으면 됩니다!

'플렉스'를 자신에게 맞는 숫자로 설정하기만 하면 됩니다.그러면 텍스트가 랩됩니다.

어떤 답변도 통하지 않기 때문에, 저는 해크를 사용하기로 했습니다.그것은 텍스트를 공백으로 분할하고, 각각의 단어를 개별적으로 렌더링하는 것입니다.

비록 해킹이지만, 부모님의 용기 스타일로 인해 포장이 엉망이 될 염려가 별로 없다는 것이 장점입니다.

// This code is written in Typescript
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'center',
    paddingVertical: 8,
  },
})

export const WrapText: React.FC<{
  text: string
}> = ({ text }) => {
  return (
    <View style={styles.container}>
      {text.split(' ').map((word, index) => (
          <Text key={index}>
            {word}{' '}
          </Text>
        ))}
    </View>
  )
}

const Example = <WrapText text="Hello this is a working hack that wraps your text."/>

P/S: 물론 이것은 알파벳 문자 시스템에서만 작동하며, 공간을 사용하지 않는 다른 문자 시스템(한문 등)은 이 구성 요소를 사용하여 랩되지 않습니다.

불행히도 위의 어느 것도 나에게 효과가 없었다.

패키지를 직접 사용할 수 있는 npm 패키지를 찾았습니다.https://github.com/Bang9/react-native-wrapped-text

또는 다음과 같은 것을 작성합니다.

<View style={{ alignItems: "center", alignSelf: "center", width: "100%" }}>
  <View style={{ flexDirection: "row", flexWrap: "wrap"}}>
    <Text style={{ textAlign: "center"}}>Long text, sooo looong...</Text>
  </View>
</View>

기준 : https://github.com/Bang9/react-native-wrapped-text/blob/master/src/index.js

높이: '자동'을 텍스트 스타일로 사용합니다.

이것만 빼고 모든 것을 시도했다.->

wrapText:{
    width:"65%"
},
listItemLeft:{
    fontWeight:"bold",
    margin:3
},

<View style={styles.wrapText}>
    <Text style={styles.listItemLeft}>{item.left}</Text>
</View>

<SafeAreaView style={{flex:1}}>
  <View style={{alignItems:'center'}}>
    <Text style={{ textAlign:'center' }}>
      This code will make your text centered even when there is a line-break
    </Text>
  </View>
</SafeAreaView>

다음과 같은 텍스트 구성요소에서 adjustsFontSizeToFit={true}를 사용해 보십시오.

<Text adjustsFontSizeToFit={true}>

아래 솔루션:

<View style={style.aboutContent}>
     <Text style={[styles.text,{textAlign:'justify'}]}>
        // text here                            
     </Text>
</View>

스타일:

aboutContent:{
    flex:8,
    width:widthDevice-40,
    alignItems:'center'
},
text:{
    fontSize:widthDevice*0.04,
    color:'#fff',
    fontFamily:'SairaSemiCondensed-Medium'
},

결과: [

 <Text style={{ flexShrink: 1 }}>
       Really really long text   //line 1
       Really really long text2   // line 2 
   </Text>

이제 텍스트가 화면 밖으로 나가지 않습니다.

<Text style={{width: 200}} numberOfLines={1} ellipsizeMode="tail">Your text here</Text>

언급URL : https://stackoverflow.com/questions/36284453/react-native-text-going-off-my-screen-refusing-to-wrap-what-to-do