react native 加载图片方式加在app端的填坑之路
在iOS文件夹下，一定要在xcode中添加才会加载出来图片，记得图片一定要定义高度
页面代码：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
//import Icon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/Ionicons';
//导入json数据
var PhoneData = require('../../assets/json/phoneData.json')
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
//定义一些全局变量
var cols = 3;
var boxW = 100;
var vMargin = (width-boxW*cols)/(cols+1);
var hMargin = 25;
export default class MainPage extends Component {
static navigationOptions = {
headerTitle:'我的',
tabBarLabel: '我的',
headerTitleStyle:{
fontSize:18,
fontWeight:'400',
alignSelf:'center',
},
headerStyle: {
height: 0, //去掉标题
},
tabBarIcon:({ tintColor, focused }) => (
<Icon
name={focused ? 'ios-contact' : 'ios-contact-outline'}
size={26}
style={{ color: tintColor }}
/>
),
};
render() {
// 获取 navigate 属性
// 跳转到详情页，并传递两个数据 title、des。
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
{/* <Text>手机列表</Text>
<Image source={require('../../assets/image/phone1.jpg')} style={styles.img1} />
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={styles.img1} /> */}
<View style={styles.listContainer}>
{this.renderAllPhone()}
</View>
</View>
);
}
//返回list
renderAllPhone(){
//alert("dd");
var allPhone = [];
//遍历数据
for(var i=0;i<PhoneData.data.length; i++){
var phone = PhoneData.data[i];
console.log("ddd")
//直接转入数组
allPhone.push(
<View key={i} style={styles.outViewStyle}>
<Image source={{uri:phone.icon}} style={styles.imageStyle} />
<Text style={styles.textTitStyle}>
{phone.title}
</Text>
</View>
)
}
//返回数据
return allPhone;
}
}
const styles = StyleSheet.create({
container: {
// backgroundColor: '#F5FCFF',
},
listContainer: {
//flex: 1,
flexDirection:'row',
flexWrap:'wrap'
},
outViewStyle:{
backgroundColor: '#fff',
alignItems: 'center',
width:boxW,
height:boxW,
marginTop: hMargin,
marginLeft: vMargin
},
imageStyle:{
width:80,
height:80
},
img1:{
width:100,
height:100
},
textTitStyle:{
}
});
本地json文件
以上是 react native 加载图片方式加在app端的填坑之路 的全部内容， 来源链接： utcz.com/z/381068.html
