一、组件的声明(导出)
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}}
/>