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

, а затем в главном компоненте»стиль:

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

Работая здесь: https://rnplay.org/apps/SampHw