前言
有关一些资料rn中文网解释的很简略,想看详细一点的文档可以搜索React和ES6的相关文档,仔细看看没准儿
你就豁然开朗了!
复制代码
this
个人理解
有过Android开发经验的童鞋,对this这个对象都不陌生。使用起来很简单,但是就是要注意一下它的作用域。
复制代码
举个例子
//箭头函数renderText1 = () => {return (<Text>name: {this.props.name}</Text>);}//普通函数renderText2() {return (<Text>name: {this.props.name}</Text>);}render() { return (<View >{this.renderText1}{this.renderText2().bind(this)}</View>)}
复制代码
这里箭头函数和普通函数最后显示的结果是一样的,但是官方推荐使用箭头函数(貌似是bind之后this指针回收
问题吧,具体原来还没找到)。这里还要指出一点,如果你调用普通函数写成{this.renderText2()}这样,那么外
部的this作用域就失效了,你运行代码就会报错。(找不到name的值)
复制代码
props
个人理解
讲真要深入的分析它,笔者目前还做不到。其实要想使用好它,就先从字面意思上来,它的字面意思就是“属性”。做过Android的同学,第一次接触的时候
容易理解成Intent,就是使用上来说这种理解也没什么大的问题,但是它的作用比Intent要多,在ES6使用的特殊性也
不能类比Intent。说这么多估计要绕晕了,那么我们姑且就理解成值传递的工具吧!
复制代码
举个例子
class TestProps extends Component {//指定属性的类型static propTypes = {name: PropTypes.string, age: PropTypes.string}//给属性设置默认值static defaultProps = {name: 'Solide'}render() {return (<Text>name: {this.props.name} age: {this.props.age}</Text>);}
}
复制代码
TestProps这个组件就设置好了Props的各种属性,使用的时候直接传递就可以了!
复制代码
<TestProps age='30'/> //默认值<TestProps name='DouBi' age='31'/> //不使用默认值
复制代码
再举个例子
//启动端代码
<Text onPress={() => navigate('World', {name: 'DouBi', age: 31})}>Hello Hello</Text>//接收端代码
render() {const { params } = this.props.navigation.state;return <View><Text>name : {params.name} age : {params.age}</Text></View>}
复制代码
state
个人理解
这个state很有味道,它和另外一个方法render()是联系起来的。怎么说呢?打个比方,用过Android的童鞋都
知道有一个叫做Adapter的东西,当他的数据改变的时候,你调用他的一个notify方法就能告诉UI去刷新。这个
state相当于把数据绑定了notify方法,只要它里面的数据有变更它就会去调用render()方法去渲染界面。
复制代码
举个例子
class Blink extends Component {constructor(props) {super(props);this.state = {showText: true};// 每1000毫秒对showText状态做一次取反操作setInterval(() => {//需要state里面的值,最好用setState方法this.setState(previousState => {//previousState 修改之前的state值return {showText: !previousState.showText};});}, 1000);}//每隔1s就会渲染一次,就出现象文字闪烁的效果render() {// 根据当前showText的值决定是否显示text内容let display = this.state.showText ? this.props.text : ' ';return (<Text>{display}</Text>);}
}
复制代码
Demo地址: https://github.com/yzj0487/StackNavigator
总结
今天说的都是很基础的一些东西,不过还是要深入咀嚼一下,越是基础的东西使用的频率越高。笔者也是最近才
开始接触RN,根据自己的进度不定期更新,有理解不对的地方可以留言指出。复制代码