搞懂这几步React Native才算入门

作者: Viknando | 来源:发表于2018-04-03 16:31 被阅读237次

1、了解目录结构

2、页面

2.1组件

2.2布局

2.3样式

3、页面跳转

3.1RN页面间跳转

App.js //初始化路由 npm install react-native-deprecated-custom-components安装Navigator

import React, {Component} from 'react';
import Navigator from 'react-native-deprecated-custom-components';
import A from './src/A'
export default class App extends Component {
    render() {
        let defaultName='A';
        let defaultComponent=A
        return (
            <Navigator.Navigator
                initialRoute={{
                  name:defaultName,
                  component:defaultComponent
                }}
                renderScene={(route,navigator)=>{
                    let Component=route.component;
                    return(<Component {...route.params} navigator={navigator}/>);
                }}

            />
        );
    }
}

A.js

import React,{ Component } from 'react';
import {
    View,ScrollView,Text
} from 'react-native'
import B from './B'
export default class A extends Component{
    //初始化函数
    constructor(props){//旧版本getInitialState()
        super(props)
        this.state={//定义变量
            id:2,
            user:'Viknando',
            userName:null
        }
    }

    _pressBtn(){
        const{navigator}=this.props;
        const self=this;
        if(navigator){
            navigator.push({//页面跳转
                name:'B',
                component:B,
                params:{
                    user:this.state.user,
                    id:this.state.id,
                    //将此方法作为参数传到B中调用
                    getUserName:function(userName){
                        self.setState({
                            userName:userName
                        })
                    }
                }
            })
        }
    }

    render(){
        if(this.state.userName){
            return(<View>
                <Text></Text>
                <Text></Text>
                <Text>user:{JSON.stringify(this.state.userName)}</Text>
            </View>)
        }else{
            return(
                <ScrollView>
                    <Text></Text>
                    <Text></Text>
                    <Text onPress={this._pressBtn.bind(this)}>Hello!</Text>
                    <Text onPress={this._pressBtn.bind(this)}>Viknando!</Text>
                </ScrollView>
            )
        }
    }

}

B.js

import React,{ Component } from 'react';
import {
    ScrollView,Text
} from 'react-native'
export default class B extends Component{
    constructor(props){
        super(props)
        this.state={
            id:null
        }
    }

    _pressBtn(){
        const{navigator}=this.props;
        const USER_MODELS={
            1:{name:'Domsting',age:'24'},
            2:{name:'Viknando',age:'20'},

        }
        if(this.props.user){
            let userNameModel=USER_MODELS[this.props.id];
            this.props.getUserName(userNameModel)//B invoked fun of A
        }
        if(navigator){
            navigator.pop();
        }

    }

    render(){
        return(
            <ScrollView>
                <Text></Text>
                <Text></Text>
                <Text>userId:{this.state.id}</Text>
                <Text onPress={this._pressBtn.bind(this)}>author:{this.state.user}</Text>
            </ScrollView>
        )
    }
    componentDidMount(){
        this.setState({
            id:this.props.id,
            user:this.props.user
        })
    }

}

3.2RN与原生页面间跳转

原生页面->RN：

tv_jump_rn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                jumpToRN();
            }
        });
public void jumpToRN(){
        Intent intent=new Intent(this,MainActivity.class);//跳转的怎么是class？
        startActivity(intent);
        this.finish();
    }

Q：跳转的怎么是class？原来MainActivity继承了ReactActivity，从而跳转到了RN页面。

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 "RNjsWithNative";
    }
}

Q：这样就跳转了？我们得知道这几点：
1、android工程中MainApplication声明了ReactApplication，getPackages()返回了new MainReactPackage()，之后我们添加模块也要添加Package,我这里添加了new JumpRP()

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),new JumpRP()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

2、MainActivity中getMainComponentName将我们定义的模块名：RNjsWithNative返回给了RN，在入口文件我们注册了RNjsWithNative对应的组件app，还记得AppRegistry.registerComponent('RNjsWithNative', () => app);么？MainActivity与RN对应的app模块才绑定在了一起

RN页面->原生

RN页面的点击事件代码是这样的,startActivityFromJS方法是自定义的？"com.rnjswithnative.BActivity"是包名？

<Text style={styles.welcome}
                      onPress={() => NativeModules.Native_Module.startActivityFromJS("com.rnjswithnative.BActivity", "this msg from RN")}>
                    Jump to NativePage!!!
                </Text>

没错，就是这样的，在android项目中我们新建了

image.png

我们得知道这几点：
1、JumpModule继承了ReactContextBaseJavaModule，定义了用@ReactMethod修饰的startActivityFromJS方法

@ReactMethod
    public void startActivityFromJS(String name, String params){
        try{
            Activity currentActivity = getCurrentActivity();
            if(null!=currentActivity){
                Class toActivity = Class.forName(name);
                Intent intent = new Intent(currentActivity,toActivity);
                intent.putExtra("msg", params);
                currentActivity.startActivity(intent);
            }
        }catch(Exception e){
            throw new JSApplicationIllegalArgumentException(
                    "不能打开Activity : "+e.getMessage());
        }
    }

2、JumpRP 声明了ReactPackage，new了JumpModule，也添加到了MainApplication

public class JumpRP implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new JumpModule(reactContext));
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

}

如果RN要向原生发消息，调用JumpModule里自己定义的方法就行。献上这个🌰

可以开始敲代码了，在代码中学习
先来几个小🌰吃一吃：先图再代码如何？

image.png

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

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

export default class image_demo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Nativ!
                </Text>
                <Image source={{uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1104142377,1692686148&fm=27&gp=0.jpg'}} style={styles.imageStyle} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

image.png

export default class App extends Component{
    render(){
        return(
            <View style={styles.container}>
                <View style={[styles.item,styles.center]}>
                    <Text style={styles.font}>酒店</Text>
                </View>
                <View style={[styles.item,styles.lineLeftRight]}>
                    <View style={[styles.center,styles.flex,styles.lineCenter]}>
                        <Text style={styles.font}>
                            海外酒店
                        </Text>
                    </View>
                    <View style={[styles.center,styles.flex]}>
                        <Text style={styles.font}>
                            特惠酒店
                        </Text>
                    </View>
                </View>
                <View style={styles.item}>
                    <View style={[styles.center,styles.flex,styles.lineCenter]}>
                        <Text style={styles.font}>
                            团购
                        </Text>
                    </View>
                    <View style={[styles.center,styles.flex]}>
                        <Text style={styles.font}>
                            客栈
                        </Text>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        marginTop:20,
        marginLeft:5,
        marginRight:5,
        borderRadius:5,
        padding:2,

        // borderColor:'blue',
        // borderWidth:1,
        flexDirection:'row',
        backgroundColor:'#FF0067'
    },
    item:{
        flex:1,
        height:80
    },
    center:{
        justifyContent:'center',
        alignItems:'center'
    },
    font:{
        color:'#fff',
        fontSize:16,
        fontWeight:'bold'
    },
    flex:{
        flex:1
    },
    lineLeftRight:{
        borderLeftWidth:1,
        borderRightWidth:1,
        borderColor:'#fff'
    },
    lineCenter:{
        borderBottomWidth:1,
        borderColor:'#fff'
    }
});

image.png

var imgs = [   'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1104142377,1692686148&fm=27&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1104142377,1692686148&fm=27&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1104142377,1692686148&fm=27&gp=0.jpg'
];//需要自己重新赋值链接，
class MyImage extends Component{
    constructor(props){
        super(props);
        var imgs=this.props.imgs;
        this.state={
            imgs:imgs,
            count:0,
        }
    }
    goNext(){
        var count = this.state.count;
        count++;
        if(count<imgs.length){
            this.setState({
                count:count,
            })
        }else{
            this.setState({
                count:0,
        })}
    }
    goPreView(){
        var count = this.state.count;
        count--;
        if(count>=0){
            this.setState({
                count:count,
            })
        }else{
            this.setState({
                count:imgs.length-1,
            })
        }
    }
    render(){
        return(
            <View style={[styles.flex]}>
                <View style={styles.image}>
                    <Image style={styles.img} source={{uri:this.state.imgs[this.state.count]}} resizeMode='contain'/>
                </View>
                <View style={styles.btns}>
                    <TouchableOpacity onPress={this.goPreView.bind(this)}>
                        <View style={styles.btn}>
                            <Text>preview</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.goNext.bind(this)}>
                        <View style={styles.btn}>
                            <Text>next</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        )

    }
}

export default class App extends Component{
    render(){
        return(
            <View style={[styles.flex, {marginTop:40}]}>
                <MyImage imgs={imgs}></MyImage>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    flex:{
        flex: 1,
        alignItems:'center'
    },
    image:{
        borderWidth:1,
        width:300,
        height:200,
        borderRadius:5,
        borderColor:'#ccc'
    },
    img:{
        height:200,
        width:300,
    },
    btns:{
        flexDirection: 'row',
        justifyContent: 'center',
        marginTop:20
    },
    btn:{
        width:60,
        height:30,
        borderColor: '#0089FF',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems:'center',
        borderRadius:3,
        marginRight:20,
    },
});

搞懂这几步React Native才算入门

1、了解目录结构

2、页面

2.1组件

2.2布局

2.3样式

3、页面跳转

3.1RN页面间跳转

3.2RN与原生页面间跳转

原生页面->RN：

RN页面->原生

如果RN要向原生发消息，调用JumpModule里自己定义的方法就行。献上这个🌰

不敲了，直接怼开胃🌰

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native开发

ReactNative