React Native : 내부 텍스트 배치 고정 너비 버튼이있는 컨테이너보기

간단한 경고 메시지를 표시하는 View 컨테이너가 있습니다. 메시지 텍스트에 줄 바꿈이 설정되어 있어야하며, 단추는 없어야합니다.React Native : 내부 텍스트 배치 고정 너비 버튼이있는 컨테이너보기

그들은 훌륭하게 연주하지 않으며 각 줄의 끝에 줄 바꿈 텍스트를 가져올 수 없습니다.

<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>

출처

2016-07-19 Peter Gerhat

주요 아이디어 Dimensions를 사용하는 메인 컨테이너의 폭을 설정하는

. 처럼 :

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

다음의 주요 구성 요소의 '스타일 : https://rnplay.org/apps/SampHw

출처

2016-07-19 08:37:43 Cherniv

그러나이 텍스트 포장도 메인에서 폭에서 차이가 다른 컨테이너 내부에서 작업해야합니다

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

여기 근무 창문, 네가 나를 이해하기를 바란다. –

@PeterGerhat이 작동해야합니다. 특정 예제를 시도하고 첨부 할 수 있습니까? – Cherniv

좋아, 문제는''을'var msgBox = ... '안에 변수로 만들고 그 너비가 올바르게 해석되지 않은 것 같습니다. 이제''을'return ( ...);에 직접 넣은 후에 작동합니다. –

React Native : 내부 텍스트 배치 고정 너비 버튼이있는 컨테이너보기

답변

관련 문제