React Native基础使用

一、组件的声明（导出）

export default class HomeView extends React.Component {
}

二、组件的引入

import Footer from './Footer'

三、变量、常量和方法的导出

//导出一个变量
export var name = 'nie';  

//导出一个方法
export function add(){
    //...
}

//导出多个变量或常量
var name = 'nie';
const age = 18;
export {name,age};

四、变量、常量和方法的引入

import {name,age,add} from './PeopleComponent';

五、props的使用

    props可以从父组件传递过来，只读不可修改，但可以自定义未被定义的默认属性。

const defaultProps={
    name: 'nie'
}

    对属性进行类型检查，支持array，bool，func，number，object，string等类型设置

const propTypes={
    name: PropTypes.string.isRequired    //必须传递且必须为字符串类型
}

    通过延展操作符传递props，简化代码

render(){
    var params = {name:'nie',age:18};
    return <PropTest {...params} />
}

    使用解构赋值传递部分props

render(){
    var params = {name:'nie',age:18};
    var {name} = prarms;
    return <PropTest name = {name} />
}

六、state的使用

初始化

//方式一,定义在构造函数中
constructor(props){
    super(props);
    this.state={
        size:100
    }
}

//方式二，定义在构造函数外
state={
    size:100
}

显示

{this.state.size}

更改

this.setState({
    size: 120
})

七、ref使用

//设置
//方式一
<RefTest ref="reftest" />

//方式二
<RefTest ref={reftest=>this.reftest=reftest} />

//获取
//方式一
this.refs.reftest;

//方式二
this.refs['reftest'];

八、图片的引入

静态图片资源

<Image 
    source={require('./tupian.png')}     //为了适配不同分辨率的手机，需要在资源文件中添加不同分辨率的图片
    resizeMode={'cover'}    //默认为cover，还可以设置为contain，stretch，repeat（ios only），center
/>

网络图片资源

<Image 
    source={{uri:'http://.....png'}} 
    style={{width:50,height:50}}    //必须设置宽高，否则无法渲染
/>

原生图片资源

<Image 
    source={{uri:'pic_name'}}    //安卓项目中，只能显示以drawable开头的文件夹下的资源
    style={{width:50,height:50,tintColor:'red'}}    //必须设置宽高，否则无法渲染;tintColor可以设置图片颜色
/>

本地文件系统中的资源，如手机相册中的图片

let imgUrl = Platform.OS==='android' ? 'file:///'+this.state.result : this.state.result;
<Image
    resizeMode = 'contain'
    style={{width:50,height:50}}
    source={{uri: imgUrl}}
/>