React Native 中如何防止文字溢出螢幕？

React Native 中的文字溢位螢幕：解決換行問題

所提供的程式碼顯示了一個React Native 元素，其中包含超出範圍的大量文字內容畫面的邊界。目標是將文字限制在螢幕中間，同時保持 80% 的動態寬度。

解決方案：

要解決此問題，請進行以下修改可以對程式碼進行：

• 從descriptionContainerHor 樣式中刪除寬度屬性：先前嘗試使用flex: 0.3 操作寬度會導致不同螢幕尺寸上的問題。建議將其刪除以實現動態寬度。
• 將 flexShrink: 1 加到 descriptionText 樣式：此 CSS 屬性允許文字在必要時收縮，確保它適合可用空間。
• 重新排列父容器：將 descriptionContainerVer 和 descriptionContainerVer2 視圖包裝在彈性行父級中。這可確保它們水平對齊，解決對齊問題。

更新的程式碼片段：

<code class="javascript">...
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:{
    flex: 1,  //no width specified
    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',
    flexShrink: 1  //allow text to shrink if necessary
  }
});
...

<View style={styles.container}>

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

</View>
...</code>

這些修改將有效防止文字超出範圍螢幕並確保其限制在所需的邊界內，同時保持動態寬度。

以上是React Native 中如何防止文字溢出螢幕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！