学一个变成语言,一般我们都先完成一个hellowrold。这就不写了,然后根据Rn官网的顺序 我们需要了解 Props(属性)和State(状态)
Props 属性用于定制一些必要的参数
State 可以动态的改变一些状态 一般在构造方法中初始化 constructor中。
小例子:
/**
* 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);
显示效果: