react native 加载图片方式加在app端的填坑之路_react-native ios文件夹里添加图片-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_33134895/article/details/80941883

本文介绍了在React Native中加载图片时遇到的问题及解决方案，重点在于iOS环境下如何正确添加图片资源，并强调了需要为图片指定高度的重要性。通过页面代码示例，展示了从本地JSON文件加载图片的方法。

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

在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文件