ReactNative学习小结

本文介绍React Native中页面跳转与参数传递的方法,包括如何使用Navigator组件实现页面跳转,如何在不同组件之间传递参数,并展示了具体的代码实例。
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

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/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值