Reactjs React-Native中的响应映像_Reactjs_React Native_Native Base

Reactjs React-Native中的响应映像

reactjs react-native

Reactjs React-Native中的响应映像,reactjs,react-native,native-base,Reactjs,React Native,Native Base,我从FacebookAPI获取了一些图像，我想显示它们的响应性，100%宽度和自动高度。问题似乎在于我的形象我尝试了以下解决方案：此外，我还尝试使用react native auto height image并将其宽度设置为屏幕的宽度实际代码： <TouchableOpacity onPress={() => Linking.openURL(post.url)}> <Card style={{ flex: 1 }}> <C

我从FacebookAPI获取了一些图像，我想显示它们的响应性，100%宽度和自动高度。问题似乎在于我的形象

我尝试了以下解决方案：

此外，我还尝试使用react native auto height image并将其宽度设置为屏幕的宽度

实际代码：

<TouchableOpacity onPress={() => Linking.openURL(post.url)}>
      <Card style={{ flex: 1 }}>
        <CardItem>
          <Left>
            <Thumbnail source={ThumbnailImage} />
            <Body>
              <Text>My text</Text>
              <Text note>{createdTime}</Text>
            </Body>
          </Left>
        </CardItem>
        <CardItem>
          <Body>
            <AutoHeightImage
              width={Dimensions.get('window').width - 35}
              source={{ uri: post.media.image.src }}
            />
            <Text style={{ marginTop: 10 }}>{post.description}</Text>
          </Body>
        </CardItem>
      </Card>
    </TouchableOpacity>

Linking.openURL（post.url）}>
我的文字
{createdTime}
{post.description}

PS：应用程序正在使用Native Base作为UI库。

我认为解决这个问题很简单，您可以使用

维度来设置图像的宽度和高度以及屏幕的宽度，如下所示：
import { Image, Dimensions } from 'react-native';

var screenWidth = Dimensions.get('window').width;

<View>
    <Image source={...} style={{ width: screenWidth, height: screenWidth }} />
</View>

从'react native'导入{Image，Dimensions}；
var screenWidth=Dimensions.get（'window'）.width；

使用paddingTop、width和position可以轻松解决此问题。试试下面的代码
<View style={{width:'100%',paddingTop:'100%'}}>
  <Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
 </View>



在上面的代码中，根据所需的图像框大小更改宽度和填充顶部