reactnative动态引用本地图片

参考&＃xff1a;

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

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

import React, {Component} from &＃39;react&＃39;;
import {StyleSheet,View,TextInput,Image,Dimensions,
} from &＃39;react-native&＃39;;
import Icon from &＃39;./icons/Icon&＃39;;let {height, width} &＃61; Dimensions.get(&＃39;window&＃39;);export class App5 extends Component {constructor() {super();this.state &＃61; {index: &＃39;1&＃39;,};}render() {return (<View style&＃61;{styles.container}><TextInputstyle&＃61;{styles.textInput}onChangeText&＃61;{(text) &＃61;> {//输入【1-8】this.setState({index: text});}}/><Imagestyle&＃61;{styles.image}source&＃61;{Icon[&＃39;avatar&＃39; &＃43; this.state.index]}/></View>);}
}const styles &＃61; StyleSheet.create({container: {flex: 1,justifyContent: &＃39;center&＃39;,alignItems: &＃39;center&＃39;,backgroundColor: &＃39;#000000&＃39;,},textInput: {width: width - 40,backgroundColor: &＃39;#ffffff&＃39;,},image: {width: 200,height: 200,marginTop: 20,},
});
效果图&＃xff1a;