react-native动态引用本地图片

参考：

icon 来源于阿里巴巴图库
react-native如何动态引用本地图片

Icon.js

export default {
    //注意这里导入： 同级目录需要前面加 './' ，否则会出错
    avatar1: require('./avatar01.png'),
    avatar2: require('./avatar02.png'),
    avatar3: require('./avatar03.png'),
    avatar4: require('./avatar04.png'),
    avatar5: require('./avatar05.png'),
    avatar6: require('./avatar06.png'),
    avatar7: require('./avatar07.png'),
    avatar8: require('./avatar08.png'),
};

App5.js:

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    TextInput,
    Image,
    Dimensions,
} from 'react-native';
import Icon from './icons/Icon';

let {height, width} = Dimensions.get('window');

export class App5 extends Component {
    constructor() {
        super();
        this.state = {
            index: '1',
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    style={styles.textInput}
                    onChangeText={(text) => {
                        //输入【1-8】
                        this.setState({index: text});
                    }}
                />
                <Image
                    style={styles.image}
                    source={Icon['avatar' + this.state.index]}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#000000',
    },
    textInput: {
        width: width - 40,
        backgroundColor: '#ffffff',
    },
    image: {
        width: 200,
        height: 200,
        marginTop: 20,
    },
});

效果图：