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 中国語 Web サイトの他の関連記事を参照してください。