javascript - 如何在 native react 中使用 justify content 属性？

Question

我正在尝试将内容对齐到图像的左侧。但是我得到的是文本将占据图像后面的左侧空间。我期待 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
    }
});

我得到的内容如下

Answer 1

您能解释一下为什么要在Text中设置Image吗？ 如果您希望图像位于文本之上，只需执行以下操作:

<Image />
<Text></Text>

否则，如果您希望它们从左到右放置，您可以将它们包装在 View 中并使用 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>