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>元素反应原住民

回答

相关问题