React Native：带有固定宽度按钮的视图容器内的文本换行

Question

我有一个显示简单警告消息的 View 容器。消息文本应设置换行，按钮不应设置。

它们配合得不好，我无法让文本在每一行的末尾换行。

<View style={{backgroundColor: 'red',flexDirection:'row',justifyContent:'space-between',alignItems:'center',flexWrap:'nowrap'}}>
  <View style={{justifyContent: 'flex-start', alignItems:'center', marginLeft:15, flexWrap: 'wrap'}}>
    <Text style={{color:'white', fontSize: 18, fontWeight:'normal', flexWrap: 'wrap'}}>You have deleted the item.</Text>
  </View>
  <TouchableHighlight style={{width:100,flexDirection:'column',marginVertical:15,flexWrap:'nowrap'}} >
    <View style={{right:0,width:100, flexDirection:'row', marginRight:15, paddingVertical:15, backgroundColor:'white',flexWrap:'nowrap'}}>
      <Text style={{fontSize: 18, fontWeight:'bold', color:'red',flexWrap:'nowrap'}}>BACK</Text>
    </View>
  </TouchableHighlight>
</View>

Answer 1

主要思想是使用 Dimensions 并设置主容器的宽度。喜欢：

import Dimensions from 'Dimensions';
let {width} = Dimensions.get('window');

然后在主组件样式中：

<View style={{backgroundColor: 'red', ... , width}}>

在这里工作： https://rnplay.org/apps/SampHw

React Native：带有固定宽度按钮的视图容器内的文本换行

React Native: Text wrapping inside View container with fixed-width button

word-wrap

flexbox

reactjs

react-native