ReactNative官网例子练习——（一）

转自：http://blog.csdn.net/mingyunxiaohai/article/details/52382459

学一个变成语言，一般我们都先完成一个hellowrold。这就不写了，然后根据Rn官网的顺序 我们需要了解 Props(属性)和State(状态)

Props 属性用于定制一些必要的参数

State 可以动态的改变一些状态 一般在构造方法中初始化 constructor中。

小例子：

[html] view plain copy print?/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from ‘react-native’;

class HaiSheng extends Component {
render() {
let pic = {
uri : ‘https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg’
};
return (
<View style={styles.container}>

<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.namec}> 欢迎大海！我是大海 你们好哇！</Text>
<Image source={pic} style={{width: 200, height: 200}} />
<Greeting name=“Rxjava”/>
<Greeting name=“RxAndroid”/>
<Greeting name=“Rxxdux”/>

<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 style={{width: 50,height: 50,backgroundColor:”green”}}/>
</View>
);
}
}
class Greeting extends Component{
render(){
return(
<View style={{alignItems:”center”}}>
<Text> Hello {this.props.name} </Text>
</View>
);
}
}

class Blink extends Component{
constructor(props){
super(props);
this.state = {showText: true};
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);

}
render(){
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ’ ’;
return (
<Text>{display}</Text
bafe
>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ’#F5FCFF’,

},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
},
namec:{
fontSize:26,
textAlign:”center”,
margin:10,
}

});

AppRegistry.registerComponent(‘HaiSheng’, () => HaiSheng);

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';

class HaiSheng extends Component {
render() {
let pic = {
uri : 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<View style={styles.container}>

<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.namec}> 欢迎大海！我是大海 你们好哇！</Text>
<Image source={pic} style={{width: 200, height: 200}} />
<Greeting name="Rxjava"/>
<Greeting name="RxAndroid"/>
<Greeting name="Rxxdux"/>

<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 style={{width: 50,height: 50,backgroundColor:"green"}}/>
</View>
);
}
}
class Greeting extends Component{
render(){
return(
<View style={{alignItems:"center"}}>
<Text> Hello {this.props.name} </Text>
</View>
);
}
}

class Blink extends Component{
constructor(props){
super(props);
this.state = {showText: true};
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);

}
render(){
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',

},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
namec:{
fontSize:26,
textAlign:"center",
margin:10,
}

});

AppRegistry.registerComponent('HaiSheng', () => HaiSheng);

显示效果：