http://facebook.github.io/react-native/docs/props.html
官方文档学习第二天。
效果图：
Paste_Image.png
首先是代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View
} from 'react-native';
export default class test extends Component {
render() {
// 此处let为es6变量声明方法，es6标准推荐使用此方法，
// 声明 名为pic的变量，将图片的url地址装载到pic中
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
// render（）方法是渲染函数，组件通过render（）渲染到屏幕中，而此处到return（）
// 是对render返回的数据，确切的说是render（）渲染的内容
// 显然这里在view组件（视图组件中）装载了两个组件
// Text文字组件，以及Image组件，react-native使用html的形式描述应用的属性
// 简而言之，这是一种类web语言的开发方式，如果对web有一定的了解，可以快速展开对原生对开发
// 同一开发语言以降低开发成本，作为开发者是乐意接受和推广的
<View style={styles.container}>
<Text>hello world!</Text>
<Image source={pic} style={{width: 193, height: 110}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('test', () => test);
II自定义组件及属性的使用
效果图：
Paste_Image.png
代码及说明：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View
} from 'react-native';
//此处自定义一个组件 名为Greeting,其中 this.props.name 是从父类组件传递而来的属性
// this.props读取的是上一级组件的属性
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
// 声明test组件，并在代码最后将其注册，简单的理解就是作为程序的入口
// 其中使用了Greeting这个组件，并在此组建中给name赋值
// 结合效果图，此处name的赋值，在上面Greeting组件创建是自发的hello这一自有行为中体现
export default class test extends Component {
render() {
return (
<View style={styles.container}>
<Greeting name='abc'></Greeting>
<Greeting name='efg'></Greeting>
<Greeting name='hij'></Greeting>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('test', () => test);
III初始数据props与动态数据states
效果图：
Paste_Image.png
代码及注解
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View
} from 'react-native';
// 此处自定义一个组件 名为Blink
// 两种数据来控制一个组件：props和state。props是在父组件中指定，
// 而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state
// 在constructor中初始化state
// （译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰）
// 然后在需要修改时调用setState方法。
class Blink extends Component {
constructor(props) {
//super(props),简单的理解就是对父类属性或者说是对象的引用，通过super可以访问父类部分数据
super(props);
this.state = {showText: true};
//设置state的值
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
// 此处的妙处是将props数据写入到state中，这是对props和states特性对比的巧妙代码
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
// 声明test组件，并在代码最后将其注册，简单的理解就是作为程序的入口
// 其中使用了Greeting这个组件，并在此组建中给name赋值
// 结合效果图，此处name的赋值，在上面Greeting组件创建是自发的hello这一自有行为中体现
export default class test extends Component {
render() {
return (
<View style={styles.container}>
{/*
Blink组件赋值 text中，这是props数据，初始化定义好的
*/}
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('test', () => test);
