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

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

<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>

Answer 2

我不确定您为什么将Image包装在Text中。由于您希望Image和Text并排出现，因此您需要使其成为同级。您可以像这样

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

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

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

在React Native中如何使用证明内容属性？

2 个答案: