阵营本地<Text>溢出<View>当柔性

因此，对于上面的图片，我试图让“绿色”框环绕动态文本。请注意，蓝色和黄色文本框的配置是flex: 'row'，文本的蓝色框为flex: 2，黄色为flex: 1。

事情工作正常，直到父容器的文本太大。

我想让绿色容器根据需要生长以适合弯曲的内心孩子。这可能与反应本土？

这里是什么样子在网络意义上的图像：

我试过设置的绿框有flex: 1但后来它太大了，因为它填满整个屏幕。设置height是可能的，但我不知道最大的内部组件的大小（至少没有一些hackery）。我甚至试过minHeight。

有没有人尝试过这样的事情？我是否需要动态地获取内部元素的高度？

更新 - 这里的代码位：

<View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}> 
    <View 
     style={{ 
     minHeight: 40, 
     borderWidth: 1, 
     borderStyle: 'solid', 
     padding: 5, 
     margin: 5, 
     backgroundColor: '#58c09e' 
     }} 
    > 
     <View style={{ flex: 1, flexDirection: 'row' }}> 
     <View style={{ flex: 2, backgroundColor: '#eeff96' }}> 
      <Text> 
      Hello this is a long bit of text that will fill up the entire column to see how the text will wrap 
      </Text> 
     </View> 
     <View style={{ flex: 1, backgroundColor: '#eeffff' }}> 
      <Text>Hello again?</Text> 
     </View> 
     </View> 
    </View> 
    </View>

感谢您寻找。

来源

2017-07-24 Chris

你可以包含一些代码吗？ –

如果您设置高度，那么高度不会改变，您必须使用弹性比率或设置最小高度/最大高度，并对文本执行相同操作，以便它们一起缩放，文本不会超出视图 –

@Chris请添加代码，以便我们可以帮助:) –

环顾四周越来越阅读了一下后确定：flex vs flexGrow vs flexShrink vs flexBasis in React Native?我能找出问题。

我需要的是flex: 0该行：

<View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}> 
    <View 
     style={{ 
     minHeight: 40, 
     borderWidth: 1, 
     borderStyle: 'solid', 
     padding: 5, 
     margin: 5, 
     backgroundColor: '#58c09e' 
     }} 
    > 
     <View style={{ flex: 0, flexDirection: 'row' }}> 
     <View style={{ flex: 2, backgroundColor: '#eeff96' }}> 
      <Text> 
      Hello this is a long bit of text that will fill up the entire column to see how the text will wrap 
      </Text> 
     </View> 
     <View style={{ flex: 1, backgroundColor: '#eeffff' }}> 
      <Text>Hello again?</Text> 
     </View> 
     </View> 
     <View> 
     <Text>Here's another test</Text> 
     </View> 
    </View> 
    </View>

这会产生什么，我会期望：

所以我猜这个Flexbox的不“工作[S]的与React Native中的方式相同，就像它在Web上的CSS一样“，就像他们在文档中声明的一样。

来源

2017-07-25 15:11:34 Chris

尝试这个Coode - >

<View style={{flex:1,flexDirection:'row',borderWidth:1,padding:5}}> 
    <View style={{flex:0.7}}> 
     <Text> 
      Hello This is long bit of text that will fill up the entire 
      column to see how the text will wrap 
     </Text> 
    </View> 

    <View style={{flex:0.3}}> 
     <Text>Hello Again</Text> 
    </View> 

</View>

来源

2017-07-25 05:07:27

你是说内在的“flex”应该加起来到父flex吗？而不是对行中每个元素加权的'flex：2'和'flex：1'？ – Chris

我试着做'0.7'和'0.3'的flex大小，它有相同的结果（参见上面的代码） – Chris

阵营本地<Text>溢出<View>当柔性

回答

相关问题