Question

上面的图片展示了我得到的内容，我想要将图片包装成可见的图片

代码是

<View style={{
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    }}>
    <Image
      source={require('./default.png')}
      style={{
        width: 5,
        height: 81,
        flex: 1
      }}
      />
    <View style={{flex: 2, flexDirection: 'column'}}>
      <Text numberOfLines= {1}
        maxLength={10}
        truncatePosition="middle"
         style={{fontSize: 15,
          marginBottom: 8,
          textAlign: 'center',

        }}>
        {rowData.userFileName}
      </Text>
      <Text style={{textAlign: 'center'}}>size: {rowData.size}</Text>
    </View>
  </View>

我认为这只是一个样式问题，但尝试了关于flex布局的所有内容都改为值，没有任何效果。

我想要这样的东西

+---------------------------------+
|+-------++----------------------+|
||       ||        Name          ||
|| Image ||                      ||
||       ||        Size          ||
|+-------++----------------------+|
+---------------------------------+

我按照官方教程进行了类似的操作但是图像被剪切了，如果长的是显示的唯一内容（请参阅图像）。

P.s：我是css风格风格的新手，所以如果这个问题很愚蠢，我就会有些松懈。

谢谢，

Answer 1

我在本地运行您的代码。它运作正常。如果您想了解布局的显示方式，可以在组件样式中添加borderWidth: 1.0, borderColor: 'orange'。

这是一个link，它可以提供您想要的效果。查看Flexbox和样式部分。

Ashok

文本组件不会包装文本react-native

1 个答案: