如何在本机反应中使用 justify content 属性？答案

【问题标题】：How to use justify content property in react native?如何在本机反应中使用 justify content 属性？
【发布时间】：2018-07-25 08:02:25
【问题描述】：

我正在尝试将内容对齐到图像的左侧。但我得到的是文本将在图像之后占用左边的空间。我期待 float-align:left 属性就像在 css 中一样在这里。所以我使用了alignItems:flex-end。但没有得到输出。有没有可能这样做。我尝试过如下

更新

<ScrollView>
    {article.map(a =>
        <TouchableOpacity onPress={() =>this.props.navigation.navigate('Article')}>
      <CardSection>
      <View style={{ flexDirection: 'row'}}>
       <Image source={{uri:a.poster}} style={styles.thumbnail_style}/>
        <Text style={styles.textStyle}> 
      {a.title}</Text>
    </View>
      </CardSection>
      </TouchableOpacity>
      )}
      </ScrollView>
    );
  }
}

const styles= StyleSheet.create({   
    thumbnail_style :{
        height: 50,
        width:50,
                },
    textStyle:{
        paddingTop:20,
    fontSize:16,
    paddingLeft:10,
    marginRight:20
    }
});

我得到的是如下

【问题讨论】：

不要使用一个元素，而是使用两个元素，然后尝试使用 flex。
对不起，我没有得到你。
我没有使用过 react 但我可以提供正常的例子它会工作吗？您的确切要求是什么，希望它如何显示，您也可以给我那个屏幕截图
不，我已经尝试过基于css样式属性的概念。无论如何，谢谢你的回复。

标签： javascript reactjs react-native jsx styling

【解决方案1】：

您能解释一下为什么在您的Text 中设置Image 吗？如果您想要文本顶部的图像，只需执行以下操作：

<Image />
<Text></Text>

否则，如果您希望它们从左到右放置，您可以将它们包装在一个视图中并使用flexDirection

<View style = {{flexDirection: 'row'}}>
  <Text></Text>
  <Image />
</View>

<View style = {{flexDirection: 'row'}}>
 <Image
 style={{height: 100, width: 100}}
 source = {{ uri: `https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg` }}/>
 <Text style = {{padding:10, flex: 1, flexWrap: 'wrap'}}>my text</Text>
</View>

【讨论】：

flexDirection: 'row' 是解决这个问题的正确方法。
冷却它的工作，但由于我需要图像和文本之间的一些间距，我使用了paddingLeft，但文本被剪掉了。我该如何避免这种情况？
你在用expo吗？如果您是，您可以切换元素检查器以查看您的更改如何改变视图。无论如何，您知道margin 和padding 之间的区别吗？请改用marginLeft。您可能还想研究一下flex
不，我没有使用 expo。顺便说一句，我也尝试过 marginLeft。是的，当然。
@anu 可以在你的styles.textStyle 中，把它改成flex:1 和flexWrap: 'wrap'

【解决方案2】：

我不确定你为什么将Image 包裹在Text 中。由于您希望 Image 和 Text 并排出现，因此您需要它是兄弟姐妹。你可以有这样的：

<View>
 <Image />
 <Text />
</View>

然后您可以将以下样式应用于View

{
flexDirection: 'row',
alignItems: 'flex-start'
}

【讨论】：