flexWrap不是在工作<Text>元素反應原住民

這裏是我的sceanarioflexWrap不是在工作<Text>元素反應原住民

var FlexWrap = React.createClass({ 
      render:function(){ 
       return(<View style={{flexDirection:'row'}}> 
          <Image source={{uri:profileImage}} 
           style={{width:100,height:100}}> 
          </Image> 
          <View style={{marginLeft:5}}> 
           <Text style={{marginTop:5, 
             marginBottom:5, 
             flexWrap:'wrap'}}> 
              This sample text 
              should be wrap 
              wrap wrap .... 
           </Text> 
           <Text style={{marginTop:5, 
             marginBottom:5, 
             flexWrap:'wrap'}}> 
              This sample text 
              should be wrap 
              wrap wrap .... 
           </Text> 
          </View> 
         </View>) 
      } 
    })

這裏

'此示例文本應該是保鮮包裝包裹......'

是在單行一行，但在我的情況下基於窗口寬度自動文本應該包裝。在這裏，我使用flexWrap: 'wrap'來包裝文本，但是什麼是包裝文本的正確方法？

請找到截圖

這裏是工作的代碼的文本與flexDirection包裝： '行'

var FlexWrap = React.createClass({ 
       render:function(){ 
        return(<View style={{flexDirection:'row'}}> 
           <Image source={{uri:profileImage}} 
            style={{width:100,height:100}}> 
           </Image> 
           <View style={{marginLeft:5,flex:1}}>//using flex:1 
            <Text style={{marginTop:5, 
              marginBottom:5 
               }}> 
               This sample text 
               should be wrap 
               wrap wrap .... 
            </Text> 
            <Text style={{marginTop:5, 
              marginBottom:5 
              }}> 
               This sample text 
               should be wrap 
               wrap wrap .... 
            </Text> 
           </View> 
          </View>) 
       } 
     })

來源

2016-02-03 vasavi

您在iOS或Android？我在iOS上測試了你的代碼，它似乎在工作。 –

我兩個IOS和Android.In IOS模擬器的工作文字換行不done.Please上面找到 – vasavi

隨附的屏幕截圖當我使用flexDirction：「行」到父視圖然後文本換行也不是沒有flexDirection否則工作：「行」這是working.But在我的情況flexDirection：「行」是必要的，在當時的文本換行也是義務如何acheieve這個plaese幫我 – vasavi

我認爲，如果你在樣式表中爲它所指定的文本指定flex屬性包。

<Text style={{marginTop:5, marginBottom:5, flexWrap:'wrap', **flex: 5,** }}>

來源

2016-07-26 03:24:40

設置

柔性：1

爲包裝查看的文本

https://github.com/facebook/react-native/issues/901

來源

2016-09-14 00:14:28

var FlexWrap = React.createClass({ 
      render:function(){ 
       return(<View style={{flexDirection:'row'}}> 
          <Image source={{uri:profileImage}} 
           style={{width:100,height:100}}> 
          </Image> 
          <View style={{marginLeft:5,flex:1,flexDirection:'column', flexWrap:'wrap'}}>// Changes here 
           <Text style={{marginTop:5, 
             marginBottom:5 
              }}> 
              This sample text 
              should be wrap 
              wrap wrap .... 
           </Text> 
           <Text style={{marginTop:5, 
             marginBottom:5 
             }}> 
              This sample text 
              should be wrap 
              wrap wrap .... 
           </Text> 
          </View> 
         </View>) 
      } 
    })

你將擁有d esired的結果，如果你改變你的屈曲方向，敷

來源

2016-10-14 09:28:20 Ank

只需你能做某事象下面這樣：

<View style={{ flex: 1 }}> 
    <Text>Your Text</Text> 
</View>

來源

2017-11-05 19:38:03 jsina

flexWrap不是在工作<Text>元素反應原住民

回答

相關問題