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

alltolove

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);

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

李金龙

哇喔
哇喔

6666