React Native：使用固定宽度按钮在View容器中包装文本

Question

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

他们不能很好地合作，我不能在每行的末尾包含文字。

RNPlay (Link)

<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');

然后在主要组件'style：

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

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