最新消息:20210917 已从crifan.com换到crifan.org

【已解决】ReactNative中如何实现图片缩放自动适配显示

React Native crifan 4542浏览 0评论

之前已经:

【已解决】ReactNative中如何在View中添加图片图标

可以显示图片了:

但是很明显,那个H图标,太大了。希望可以自定义显示宽和高,或者是自动适配大小区域。

参考:

javascript – Trouble requiring image module in React Native – Stack Overflow

“bg: {

    width: 400,

    height: 300,

    alignSelf: ‘auto’,

  },”

去试试:

alignSelf

react native image alignSelf

Center an image? · Issue #384 · facebook/react-native · GitHub

[Image] Maintaining Aspect Ratio of <Image> · Issue #858 · facebook/react-native · GitHub

在父一级的视图中加上:

        justifyContent: ‘center’,

        alignItems: ‘center’,

变成:

    customerRow:{
        flex: 1,
        flexDirection: ‘row’,
        height: 30,
        justifyContent: ‘center’,
        alignItems: ‘center’,
    },

然后的确就居中显示图片了:

然后再去限制图片宽和高:

    intentionLevel: {
        paddingLeft: 10,
        width: 20,
        height: 20,
    },

即可正常显示想要的效果了:

【总结】

此处,想要图片,居中显示的话,则是,在其父一级的视图中,加上:

        justifyContent: ‘center’,
        alignItems: ‘center’,

比如:

                          <View style={styles.customerRow}>
                            <Image style={styles.intentionLevel} source={require(‘./img/customerLevel_H.png’)} />
                            <Text style={styles.customerName}>{rowData.customerName}</Text>
                            <Text style={styles.intentionCar}>{rowData.intentionCar}</Text>
                            <Text style={styles.updateTime}>{rowData.updateTime}</Text>
                          </View>
const styles = StyleSheet.create({
    customerRow:{
        flex: 1,
        flexDirection: ‘row’,
        height: 30,
        justifyContent: ‘center’,
        alignItems: ‘center’,
    },
}

即可正常显示图片,居中对齐了。

转载请注明:在路上 » 【已解决】ReactNative中如何实现图片缩放自动适配显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
99 queries in 0.184 seconds, using 23.35MB memory