React Native图片显示以及点击

最新推荐文章于 2024-11-19 10:40:16 发布

原创最新推荐文章于 2024-11-19 10:40:16 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native 图片使用

React native 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在React Native中如何正确地显示图片，并详细讲解了图片的点击事件处理，包括导入图片资源、使用Image组件、设置图片样式以及实现点击回调等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
    Button,
    Image,
    TouchableOpacity,
    Alert
} from 'react-native';


const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

const imgae_url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553526121837&di=bad1e61c7c7c590a1c758c6a2a68bc6e&imgtype=0&src=http%3A%2F%2Fzkres1.myzaker.com%2F201812%2F5c026780622768eda6008803_640.jpg';

type Props = {};
export default class App extends Component<Props> {

    state = {
        likes: 0
    };

    onPress = () => {
        const {likes} = this.state;
        this.setState({likes: likes + 1});
    };


    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}
                      onPress={() => {
                          // Alert.alert("点击了我");
                          Alert.alert("标题不能为空")

                      }}>
                    Welcome to React Native!

                </Text>

                <TouchableOpacity onPress={this.onPress}>
                    <Image source={{uri:imgae_url}} style={{width:200,height:200,margin:5}}/>

                </TouchableOpacity >
                <Text>
                    {this.state.likes}
                </Text>

                <TextInput
                    style={styles.editContain}
                    {...this.props} // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
                    editable={true}
                    maxLength={40}
                />


            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },

    editContain: {
        height: 40, borderColor: 'gray', borderWidth: 1, color: '#0000ff', backgroundColor: '#FF0000', minWidth: 100
    },
    thisButton: {
        marginTop: 50
    }

});