react-native 学习之Image篇

最新推荐文章于 2025-08-07 21:48:39 发布

weixin_33757911

最新推荐文章于 2025-08-07 21:48:39 发布

阅读量58

点赞数

文章标签： javascript ViewUI

本文介绍了一个使用React Native构建的应用示例，展示了如何通过React Native组件创建界面布局，并使用本地图片资源进行展示。此示例应用包含多个界面元素，如图片和文字等。

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

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

class machaoProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={ styles.topBgView}>
       
       
        <View style={styles.unitView} >
            <Image 
                source={require('./Images/001.png')}
                style={styles.imageStyle}
                />
             <Text style = {styles.textStyle}>
             美食
             </Text>
        </View>
        
        <View style={styles.unitView} >
            <Image 
                source={require('./Images/002.png')}
                style={styles.imageStyle}
                />
             <Text style = {styles.textStyle}>
             电影
             </Text>
        </View>
        
        <View style={styles.unitView} >
            <Image 
                source={require('./Images/003.png')}
                style={styles.imageStyle}
                />
             <Text style = {styles.textStyle}>
             酒店
             </Text>
        </View>
        
        <View style={styles.unitView} >
            <Image 
                source={require('./Images/004.png')}
                style={styles.imageStyle}
                />
             <Text style = {styles.textStyle}>
             KTV
             </Text>
        </View>
        </View>
        
        
        <View style = {styles.topBgView}> 
        
        <View style={styles.unitView} >
            <Image 
                source={require('./Images/005.png')}
                style={styles.imageStyle}
                />
             <Text style = {styles.textStyle}>
             外卖
             </Text>
        </View>
        
         <View style={styles.unitView} >
            <Image 
                source={require('./Images/006.png')}
                style={styles.imageStyle}
                />
             <Text style = {styles.textStyle}>
             优惠买单
             </Text>
        </View>
        
         <View style={styles.unitView} >
            <Image 
                source={require('./Images/007.png')}
                style={styles.imageStyle}
                />
             <Text style = {styles.textStyle}>
             你说呢
             </Text>
        </View>
        
        </View>
     
     
        
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginLeft: 5,
    marginTop: 20,
    marginRight: 5,
  },
  topBgView: {
    flexDirection: 'row',
    backgroundColor: 'red',
    marginTop: 10,
  },
  unitView: {
      width: 70 ,  
  },
  imageStyle: {
     alignSelf: 'center',
     width: 45,
     height: 45, 
  },
  textStyle: {
      marginTop: 0,
      textAlign: 'center',
      fontSize: 15,
      color: '#555555'
  }
});

AppRegistry.registerComponent('machaoProject', () => machaoProject);