ReactNative学习小结

来源：互联网发布：怎么样提高淘宝转化率编辑：程序博客网时间：2024/05/22 11:59

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、Componentimport {  AppRegistry,  StyleSheet,  Text,  Image,  View,  ToastAndroid,  TouchableWithoutFeedback} from 'react-native';//从react-native导入需要的各种类//实现每个页面需要的Componentclass 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.csdn.net/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.csdn.net/huaheshangxo/article/details/50926946

Component生命周期：http://reactjs.cn/react/docs/component-specs.html

植入原生应用：http://reactnative.cn/docs/0.28/embedded-app-android.html

js跳转到原生页面：http://www.lcode.org/react-native-%E8%BF%9B%E9%98%B6%E4%B9%8B%E5%8E%9F%E7%94%9F%E6%B7%B7%E5%90%88%E4%B8%8E%E6%95%B0%E6%8D%AE%E9%80%9A%E4%BF%A1%E5%BC%80%E5%8F%91%E8%AF%A6/

0 0