import com.facebook.react.ReactActivity;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "ImgProject";
}
}
Activity继承了ReactActivity,注册方式和原生一样,在AndroidManifest.xml进行注册。getMainComponentName方法返回需要加载的Component名字,Component类似于一个xml文件或者是ViewGroup。
Component要在index.android.js进行声明和注册。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';//导入React、Component
import {
AppRegistry,
StyleSheet,
Text,
Image,
View,
ToastAndroid,
TouchableWithoutFeedback
} from 'react-native';//从react-native导入需要的各种类
//实现每个页面需要的Component
class ImgProject extends Component{
//定义一个有参函数
meishiClick(tagName){
ToastAndroid.show(tagName,ToastAndroid.SHORT);
}
//渲染view。
View 可以包含很多个组件,默认竖直排列,样式加上flexDirection:'row'属性可以水平排列。
render(){
return (
<View style={{flexDirection:'row',marginLeft:5,marginTop:10,marginRight:5}}>
<TouchableWithoutFeedback //给Image和Text添加点击事件
onPress = {() => this.meishiClick("跳转到美食页面")}>
<View style={{width:70}}>
<Image source={{uri:'one'}} style={{alignSelf:'center',width:45,height:45}}/>
<Text style={{marginTop:5,textAlign:'center',fontSize:11,color:'#555555'}}>美食</Text>
</View>
</TouchableWithoutFeedback>
<View style={{width:70}}>
<Image source={{uri:'two'}} style={{alignSelf:'center',width:45,height:45}}/>
<Text style={{marginTop:5,textAlign:'center',fontSize:11,color:'#555555'}}>电影</Text>
</View>
</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('ImgProject',() => ImgProject);
RN页面之间进行跳转,代码如下
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Navigator
} from 'react-native';
import HomeComponent from './Home'
class ImgProject extends Component{
render(){
let defaultName = 'HomeComponent';
let defaultComponent = HomeComponent;
return (
<Navigator
initialRoute={{name:defaultName,component:defaultComponent}}
configureScene={(route) =>{
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route,navigator) =>{
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}
}
/>
);
}
}
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('ImgProject',() => ImgProject);
Home.js
import React, { Component } from 'react';
import {
View,
Navigator,
TouchableOpacity,
AppRegistry,
Image,
Text
} from 'react-native';
import MeiShiComponent from './MeiShiComponent';
export default class HomeComponent extends Component{
constructor(props){
super(props);
this.state = {
id:2,
user:null
};
}
_pressButton(){
let _this = this;
//const 声明创建一个只读的常量。这不意味着常量指向的值不可变,而是变量标识符的值只能赋值一次。(译者注:JavaScript中的常量和Java,C++中的常量一个意思。注意区分常量的值和常量指向的值的不同)
const{navigator} = this.props;
if(navigator){
navigator.push({
name:'MeiShiComponent',
component:MeiShiComponent,
params:{
id:this.state.id,
getUser:function(user){//把方法当做一个参数传递到下一个界面
//如果这里直接写this.setState(),会报错,this.setState的this指向的是当前函数对象,即navigator,我们要使用的是当前component的对象,所以在方法开始将this赋给临时变量 _this。
_this.setState({
user:user
})
}
}
})
}
}
render(){
if(this.state.user){
return(
<View>
<Text>用户信息: { JSON.stringify(this.state.user) }</Text>
</View>
);
}else{
return (
<View style={{flexDirection:'row',marginLeft:5,marginTop:10,marginRight:5}}>
<TouchableOpacity
onPress = {this._pressButton.bind(this)}>//bind(this)的作用是给方法绑定this对象,方法中可以使用this对象,否则使用会报错。
<View style={{width:70}}>
<Image source={{uri:'one'}} style={{alignSelf:'center',width:45,height:45}}/>
<Text style={{marginTop:5,textAlign:'center',fontSize:11,color:'#555555'}}>美食</Text>
</View>
</TouchableOpacity>
<View style={{width:70}}>
<Image source={{uri:'two'}} style={{alignSelf:'center',width:45,height:45}}/>
<Text style={{marginTop:5,textAlign:'center',fontSize:11,color:'#555555'}}>电影</Text>
</View>
</View>
);
}
}
}
// export default HomeComponent;
// AppRegistry.registerComponent('HomeComponent',() => HomeComponent);
MeiShiComponent
import React, { Component } from 'react';
import {
View,
Navigator,
Text,
TouchableOpacity
} from 'react-native';
import HomeComponent from './Home'
const USER_MODELS = {
1:{name:'mot',age:23},
2:{name:'啦啦啦',age:25}
};
export default class MeiShiComponent extends Component{
constructor(props){
super(props);
this.state = {
id:null
};
}
//这里获取从FirstPageComponent传递过来的参数: id
componentDidMount(){
this.setState({
id:this.props.id
});
}
_pressButton() {
const { navigator } = this.props;
if(this.props.getUser){
let user = USER_MODELS[this.props.id];
this.props.getUser(user);
}
if(navigator) {
navigator.pop();
}
}
render() {
return (
<View>
<Text>获得的参数: id={ this.state.id }</Text>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}
}
参考文章:
搭建环境:http://www.lcode.org/%e5%8f%b2%e4%b8%8a%e6%9c%80%e8%af%a6%e7%bb%86windows%e7%89%88%e6%9c%ac%e6%90%ad%e5%bb%ba%e5%ae%89%e8%a3%85react-native%e7%8e%af%e5%a2%83%e9%85%8d%e7%bd%ae/
点击事件:http://blog.youkuaiyun.com/liu8021203/article/details/50828044
RN页面间跳转及参数传递:http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B/17
http://blog.youkuaiyun.com/huaheshangxo/article/details/50926946
Component生命周期:http://reactjs.cn/react/docs/component-specs.html
植入原生应用:http://reactnative.cn/docs/0.28/embedded-app-android.html