论坛 › Web开发 › 用react native开发手机app之插入图片与组件制作

alltolove 发表于 2017-8-4 10:46:36

用react native开发手机app之插入图片与组件制作

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';

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

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    justifyContent:'center',
    flexWrap: 'wrap',
    alignItems:'center'
},
img:{
    width:200,
    height:50
}
});

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

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

效果图：


然后我们修改一下代码，把整个项目可以做成一个组件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
function Pic(){
return(
    <View style={styles.container}>
          <Image style={styles.img} source={require('./logo.png')}/>
          <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
      </View>
    )
}
export default class myreact extends Component {
render() {
    return (
      <Pic/>
    );
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    justifyContent:'center',
    flexWrap: 'wrap',
    alignItems:'center'
},
img:{
    width:200,
    height:50
}
});

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

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

export default class myreact extends Component {
render() {
    return (
      <Pic/>
    );
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    justifyContent:'center',
    flexWrap: 'wrap',
    alignItems:'center'
},
img:{
    width:200,
    height:50
}
});

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

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

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    justifyContent:'center',
    flexWrap: 'wrap',
    alignItems:'center'
},
img:{
        borderRadius: 20,
        borderColor: 'red',
        borderWidth: 2,
    width:200,
    height:50
}
});
要把头文件跟样式变量也得写在这文件里，我们刚才的源文件变为：
import React, { Component } from 'react';
import {
AppRegistry,

} from 'react-native';
import Pic from './test.js'
export default class myreact extends Component {
render() {
    return (
      <Pic/>
    );
}
}

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

这样看起来就很规范了，我又加了些边角效果，效果图为：

李金龙 发表于 2017-8-4 12:22:11

哇喔
哇喔

6666

查看完整版本: 用react native开发手机app之插入图片与组件制作