ตอบสนองข้อความดั้งเดิมที่ปิดหน้าจอของฉันโดยไม่ยอมตัด จะทำอย่างไร?

โค้ดต่อไปนี้สามารถพบได้ในตัวอย่างจริงนี้

ฉันมีองค์ประกอบพื้นเมืองตอบสนองต่อไปนี้:

'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% ของผู้ปกครอง

ฉันไม่คิดว่าฉันควรใช้เพราะผมจะทำงานนี้ในหลายหน้าจอมือถือที่แตกต่างกันและฉันอยากให้มันเป็นแบบไดนามิกดังนั้นฉันคิดว่าฉันควรอาศัยทั้งหมดในwidthflexbox

(นั่นคือเหตุผลเริ่มต้นว่าทำไมฉันถึงมี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 หากคุณต้องการขอบคุณเขา

พันธมิตร Rippley

แก้ไข: อ. 09 เม.ย. 2562

ดังที่ @sudoPlz กล่าวไว้ในความคิดเห็นมันใช้ได้กับการflexShrink: 1อัปเดตคำตอบนี้

นี่คือข้อบกพร่องที่ทราบ flexWrap: 'wrap'ไม่ได้ผลสำหรับฉัน แต่วิธีนี้ดูเหมือนจะใช้ได้กับคนส่วนใหญ่

รหัส

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

รูปแบบ

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

flexShrink: 1วิธีการแก้ปัญหาที่เป็น

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

ขึ้นอยู่กับการตั้งค่าของคุณคุณอาจต้องเพิ่มflexShrink: 1ไปยัง<View>ผู้ปกครองของคุณด้วยเพื่อให้สิ่งนี้ใช้งานได้ดังนั้นเล่นกับสิ่งนั้นและคุณจะทำให้สำเร็จ

Adam Pietrasiakค้นพบวิธีแก้ปัญหาในหัวข้อนี้

คุณเพียงแค่ต้องมีกระดาษห่อหุ้มสำหรับ<Text>ดิ้นด้านล่าง

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

มันทำงานได้หากคุณลบflexDirection: rowจากdescriptionContainerVerและdescriptionContainerVer2ตามลำดับ

UPDATE (ดูความคิดเห็น)

ฉันได้ทำการเปลี่ยนแปลงเล็กน้อยเพื่อให้บรรลุสิ่งที่ฉันคิดว่าคุณต้องการ ก่อนอื่นฉันลบdescriptionContainerHorส่วนประกอบออก แล้วฉันจะตั้งค่าflexDirectionมุมมองแนวตั้งเพื่อrowเพิ่มและalignItems: 'center' justifyContent: 'center'เนื่องจากในความเป็นจริงแล้วมุมมองแนวตั้งซ้อนกันตามแกนแนวนอนฉันจึงลบVerส่วนนั้นออกจากชื่อ

ตอนนี้คุณมีมุมมอง Wrapper ที่ควรจัดแนวเนื้อหาในแนวตั้งและแนวนอนและวางซ้อนกันตามแกน 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
},

หวังว่านี่จะช่วยได้!

อีกวิธีหนึ่งที่ฉันพบสำหรับปัญหานี้คือการรวมข้อความไว้ในมุมมอง ยังตั้งค่ารูปแบบของมุมมองเป็นแบบยืดหยุ่น: 1.

ฉันต้องการเพิ่มว่าฉันมีปัญหาเดียวกันและ flexWrap, flex: 1 (ในส่วนประกอบข้อความ) ไม่มีอะไรที่ยืดหยุ่นได้สำหรับฉัน

ในที่สุดฉันตั้งค่าความกว้างของ Wrapper ของส่วนประกอบข้อความเป็นความกว้างของอุปกรณ์และข้อความก็เริ่มตัด 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>

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

{flex: aNumber} คือทั้งหมดที่คุณต้องการ!

เพียงตั้งค่า "ดิ้น" เป็นตัวเลขที่เหมาะกับคุณ จากนั้นข้อความจะห่อ

ในเวอร์ชัน 0.62.2 ของ React Native ฉันแค่ใส่ "flex-shrink: 1" ใน Container ของ "Text" ของฉัน แต่จำทิศทาง flex: row ใน View of container ขอบคุณพวกคุณสำหรับความช่วยเหลือ

รหัสของฉัน:

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;
`;
`;

วิธีแก้ปัญหาของฉันด้านล่าง:

<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={{width: 200}} numberOfLines={1} ellipsizeMode="tail">Your text here</Text>