鱼C论坛

 找回密码
 立即注册
查看: 2711|回复: 1

[技术交流] 用react native开发手机app之插入图片与组件制作

[复制链接]
发表于 2017-8-4 10:46:36 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
  1. import React, { Component } from 'react';
  2. import {
  3.   AppRegistry,
  4.   StyleSheet,
  5.   Text,
  6.   View,
  7.   Image
  8. } from 'react-native';

  9. export default class myreact extends Component {
  10.   render() {
  11.     return (
  12.       <View style={styles.container}>
  13.           <Image style={styles.img} source={require('./logo.png')}/>
  14.           <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
  15.       </View>
  16.     );
  17.   }
  18. }

  19. const styles = StyleSheet.create({
  20.   container: {
  21.     flex: 1,
  22.     backgroundColor: '#F5FCFF',
  23.     justifyContent:'center',
  24.     flexWrap: 'wrap',
  25.     alignItems:'center'
  26.   },
  27.   img:{
  28.     width:200,
  29.     height:50
  30.   }
  31. });

  32. AppRegistry.registerComponent('myreact', () => myreact);
复制代码

这就是插入图片的方法,把图片文件放进主项目目录里就行。另外text标签支持样式继承,在这里外层的字号大小被内层继承了。

效果图:
fdg.png

然后我们修改一下代码,把整个项目可以做成一个组件
  1. import React, { Component } from 'react';
  2. import {
  3.   AppRegistry,
  4.   StyleSheet,
  5.   Text,
  6.   View,
  7.   Image
  8. } from 'react-native';
  9. function Pic(){
  10.   return(
  11.     <View style={styles.container}>
  12.           <Image style={styles.img} source={require('./logo.png')}/>
  13.           <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
  14.       </View>
  15.     )
  16. }
  17. export default class myreact extends Component {
  18.   render() {
  19.     return (
  20.       <Pic/>
  21.     );
  22.   }
  23. }

  24. const styles = StyleSheet.create({
  25.   container: {
  26.     flex: 1,
  27.     backgroundColor: '#F5FCFF',
  28.     justifyContent:'center',
  29.     flexWrap: 'wrap',
  30.     alignItems:'center'
  31.   },
  32.   img:{
  33.     width:200,
  34.     height:50
  35.   }
  36. });

  37. AppRegistry.registerComponent('myreact', () => myreact);
复制代码

这种方法叫做函数组件,优点是执行速度快,缺点是功能比较少,还有一种方法叫做类组件
  1. import React, { Component } from 'react';
  2. import {
  3.   AppRegistry,
  4.   StyleSheet,
  5.   Text,
  6.   View,
  7.   Image
  8. } from 'react-native';
  9. class Pic extends React.Component{
  10.   render(){
  11.     return(
  12.       <View style={styles.container}>
  13.           <Image style={styles.img} source={require('./logo.png')}/>
  14.           <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
  15.       </View>
  16.     )
  17. }
  18. }

  19. export default class myreact extends Component {
  20.   render() {
  21.     return (
  22.       <Pic/>
  23.     );
  24.   }
  25. }

  26. const styles = StyleSheet.create({
  27.   container: {
  28.     flex: 1,
  29.     backgroundColor: '#F5FCFF',
  30.     justifyContent:'center',
  31.     flexWrap: 'wrap',
  32.     alignItems:'center'
  33.   },
  34.   img:{
  35.     width:200,
  36.     height:50
  37.   }
  38. });

  39. AppRegistry.registerComponent('myreact', () => myreact);
复制代码

一般都用这种方法,而且要把组件放进另外一个文件里,方便管理,只在主文件调用就可以了,方法如下:
先创建一个文件比如test.js,然后把我们写的组件类cut进那个文件,在添些东西进去:
  1. import React, { Component } from 'react';
  2. import {
  3.   AppRegistry,
  4.   StyleSheet,
  5.   Text,
  6.   View,
  7.   Image
  8. } from 'react-native';
  9. export default class Pic extends React.Component{
  10.   render(){
  11.     return(
  12.       <View style={styles.container}>
  13.           <Image style={styles.img} source={require('./logo.png')}/>
  14.           <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
  15.       </View>
  16.     )
  17. }
  18. }

  19. const styles = StyleSheet.create({
  20.   container: {
  21.     flex: 1,
  22.     backgroundColor: '#F5FCFF',
  23.     justifyContent:'center',
  24.     flexWrap: 'wrap',
  25.     alignItems:'center'
  26.   },
  27.   img:{
  28.           borderRadius: 20,
  29.           borderColor: 'red',
  30.           borderWidth: 2,
  31.     width:200,
  32.     height:50
  33.   }
  34. });
复制代码

要把头文件跟样式变量也得写在这文件里,我们刚才的源文件变为:
  1. import React, { Component } from 'react';
  2. import {
  3.   AppRegistry,
  4.   
  5. } from 'react-native';
  6. import Pic from './test.js'
  7. export default class myreact extends Component {
  8.   render() {
  9.     return (
  10.       <Pic/>
  11.     );
  12.   }
  13. }

  14. AppRegistry.registerComponent('myreact', () => myreact);
复制代码

这样看起来就很规范了,我又加了些边角效果,效果图为:
aaaaa.png

评分

参与人数 1荣誉 +6 鱼币 +6 贡献 +6 收起 理由
不二如是 + 6 + 6 + 6 加油

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-8-4 12:22:11 | 显示全部楼层
哇喔
哇喔

6666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 16:16

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表