Question

我正在渲染一个简单的视图。它由右侧的图像和左侧的一些文本组成。这就是它的样子：

return (
      <View style={styles.companyContainerStyle}>
        <View>
          <Text>{this.props.companyNameAr}</Text>
          <Text>{this.props.descriptionAr}</Text>
        </View>
        <View style={styles.imageContainerStyle}>
          <Image
            style={styles.imageStyle}
            source={{ uri: this.props.logo }}
            resizeMode='contain'
            resizeMethod='auto'
          />
        </View>
      </View>
    );

以下是我应用于使文本和图像彼此对齐的样式：

const styles = {
  companyContainerStyle: {
    flex: 1,
    flexDirection: 'row',
    padding: 10
  },
  imageContainerStyle: {
    borderRadius: 5,
    borderWidth: 2,
    borderColor: '#2279b4',
    padding: 1,
  },
  imageStyle: {
    flex: 1,
    height: 100,
    width: 100,
  }
}

非常奇怪的部分是它在模拟器上看起来像这样：

我认为文本的长度是将图像推到屏幕的最右边。我认为线的数量会相应调整，以适应屏幕中的所有内容。然而事实并非如此。如果文本的长度未知（从数据库中呈现），我如何使一切看起来整洁？??

Answer 1

＆＃13;

#container {
  display: flex;
  justify-content: space-around;
  width: 70%;
  height: 400px;;
  border: 2px solid grey;
  padding: 5px;
}
#top_content {
display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
#para {
  width: 60%;
  text-align: justify;
  margin: 0px;
  
  
}
img {
  height: 20%;
  width: 20%;
}

＆＃13;

<div id="container">
  <div id="top_content">
    <p id="para">adfasdfadf sadfdaafafdasdfadfadfadfdfad dasadfadfadfadfadgvfa sasadasdaf asdfdfdadfadf</p>
<img src="http://lorempixel.com/400/200" alt="myimg">  
  </div>
  
</div>

＆＃13;

这样的事情可以确保你的文字不会将你的img推到外面

Answer 2

将flex: 1添加到imageContainerStyle，并将flex: 1添加到View，它是两个Text组件的容器。

原因是，如果Text组件上没有带flex: 1的容器，则文本将尝试占用所有可能的空间。容器将限制

图像视图意外地向右偏离页面

2 个答案: