2016-08-27 23:01:58 u012620506 阅读数 4819
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58305 人正在学习 去看看 李宁

学了一段RN了,想自己做个东西练练手。于是准备做一个App启动的展示页,可以左右滑动切换,并且底部有当前页提示,效果图如下:


1)组件层级关系


总体来说就是分三块:一个View组件作为父容器,包裹一ViewPagerAndroid 组件和用View模拟的一个页面切换展示组件。

2)首先是头部引用ViewPagerAndroid组件,代码为:

/*左右翻页组件*/
 <ViewPagerAndroid
     style={styles.container}
     //绑定事件,引用时要在函数末尾加bind(this)
     onPageSelected={this.onPageSelected.bind(this)}
     //初始化页面为第一个页面,从0开始
     initialpage={0}>
     <View style={styles.container}>
         <Image source={require('../../res/img/p1.jpg')} style={styles.image}></Image>
         <Text style={styles.welcome}>
             医生叫我进行光合作用{'\n'}
             不要熬夜了
         </Text>
     </View>
     <View style={styles.container}>
         <Image source={require('../../res/img/p2.jpg')} style={styles.image}></Image>
         <Text style={styles.welcome}>
             人生不断向前的秘诀{'\n'}
             就是忘记从那里来 记得到哪里去
         </Text>
     </View>
     <View style={styles.container}>
         <Image source={require('../../res/img/p3.jpg')} style={styles.image}></Image>
         <Text style={styles.welcome}>
             人生路虽漫长{'\n'}
             但是关键的就那几步
         </Text>
     </View>
     <View style={styles.container}>
         <Image source={require('../../res/img/p1.jpg')} style={styles.image}></Image>
         <Text style={styles.welcome}>
             欢迎使用原点APP
         </Text>
     </View>
 </ViewPagerAndroid>

此组件使用起来很简单,就是ViewPagerAndroid里面包裹几个View组件,里面View的个数就是切换页面的数量。用到的属性有两个initialpage和onPageSelected。Initialpage就是定义初始化页面,initialpage={0}就是初始化页面为第一个页面,从0开始;onPageSelected监听页面滑动,e.nativeEvent.position代表当前页面的索引值。使用时注意,绑定事件时末尾要加上bind(this),否则会报错。

3)用View模拟页面切换提示效果,代码为:

Code1:

//监听页面变化
onPageSelected=function(e) {
    //默认从0开始,0是第一页
    this.setState({page: e.nativeEvent.position});
    console.log('CurrentPage: '+e.nativeEvent.position);
    ToastAndroid.show('CurrentPage: '+e.nativeEvent.position, ToastAndroid.SHORT);
}
Code2:

/*模拟页面选中*/
<View style={styles.slider}>
    <View style={styles.ol}>
        <View style={page==0?styles.currt:styles.li}></View>
        <View style={page==1?styles.currt:styles.li}></View>
        <View style={page==2?styles.currt:styles.li}></View>
        <View style={page==3?styles.currt:styles.li}></View>
    </View>
</View>

本部分代码从里往外讲吧,里面4个View模式的是四个小圆点的效果。当前页面显示时通过调用Code1方法修改page的值,然后通过三目运算符判断切换显示样式,效果为原点拉长为椭圆形。

4)代码样式:

const styles = StyleSheet.create({
    bg: {
        flex: 1,
        backgroundColor:'#CCFF66',
    },
    container: {
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center',
    },
    image: {
        width:300,
        height:300,
        borderRadius:150,
    },
    welcome: {
        fontSize: 16,
        textAlign: 'center',
    },
    slider: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    ol: {
        backgroundColor:'rgba(0,0,0,0.3)',
        height:20,
        width:80,
        justifyContent:'space-around',
        alignItems: 'center',
        flexDirection:'row',
        borderRadius:10,
        margin:20,
    },
    li: {
        backgroundColor:'rgba(255,255,255,1.0)',
        height:10,
        width:10,
        borderRadius:5,
    },
    currt: {
        backgroundColor:'rgba(255,255,255,1.0)',
        height:10,
        width:15,
        borderRadius:5,
    },
});

简单做个介绍,当然布局采用的四Flex布局,使用圆形效果注意两点即可:

1、宽高相等;2、borderRadius是高度(宽度)的一半。

5)项目完整代码:

/**
 * Created by linyufeng on 2016/8/27.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ViewPagerAndroid,
    Image,
    ToastAndroid,
}from 'react-native';

class HelloWorld extends Component {
    constructor(props) {
        super(props);
        this.state = {
            page: 0,
        }
    }
    //监听页面变化
    onPageSelected=function(e) {
        //默认从0开始,0是第一页
        this.setState({page: e.nativeEvent.position});
        console.log('CurrentPage: '+e.nativeEvent.position);
        ToastAndroid.show('CurrentPage: '+e.nativeEvent.position, ToastAndroid.SHORT);
    }

    render() {
        let page = this.state.page;
        return (
            
                
                    
                        
                        
                            医生叫我进行光合作用{'\n'}
                            不要熬夜了
                        
                    
                    
                        
                        
                            人生不断向前的秘诀{'\n'}
                            就是忘记从那里来 记得到哪里去
                        
                    
                    
                        
                        
                            人生路虽漫长{'\n'}
                            但是关键的就那几步
                        
                    
                    
                        
                        
                            欢迎使用原点APP
                        
                    
                
                
                    
                        
                        
                        
                        
                    
                
            
        );
    }
}

const styles = StyleSheet.create({
    bg: {
        flex: 1,
        backgroundColor:'#CCFF66',
    },
    container: {
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center',
    },
    image: {
        width:300,
        height:300,
        borderRadius:150,
    },
    welcome: {
        fontSize: 16,
        textAlign: 'center',
    },
    slider: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    ol: {
        backgroundColor:'rgba(0,0,0,0.3)',
        height:20,
        width:80,
        justifyContent:'space-around',
        alignItems: 'center',
        flexDirection:'row',
        borderRadius:10,
        margin:20,
    },
    li: {
        backgroundColor:'rgba(255,255,255,1.0)',
        height:10,
        width:10,
        borderRadius:5,
    },
    currt: {
        backgroundColor:'rgba(255,255,255,1.0)',
        height:10,
        width:15,
        borderRadius:5,
    },
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

拷贝代码请修改组件名HelloWorld为自己项目的名字,否则会报错。

2016-09-20 09:56:55 li905663280 阅读数 3407
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58305 人正在学习 去看看 李宁

react-native 与原生互相调用

explain

react-native也相当于一个activity,所以他启动原生activity,我们需要新建一个module,在其中新建启动原生activity的方法,如果传参数就用intent;如果需要返回的话就需要用到回调函数;同样有原生activity启动react-native同样点击按钮,触发方法,启动react-native的activity,传递参数就用intent.

code

1.index.android.js   调用nativemodules.
_goNative=()=>{
    NativeModules.MyMapIntentModule.startActivityByClassname('com.demo.MapActivity',"盘古花园")
  }
2.MyMapIntentModule.java  nativemodule启动原生activity,并传递参数
public class MyMapIntentModule extends ReactContextBaseJavaModule{
    @Override
    public String getName() {
        return "MyMapIntentModule";
    }

    public MyMapIntentModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    public final  static String EXTRA_SECTIONNAME="com.demo.MyMapIntentModule.sectionName";
    @ReactMethod
    public void startActivityByClassname(String activityClassName,String sectionName){
        try{
            System.out.println("nihao"+activityClassName);
            Activity currentActivity=getCurrentActivity();
            Class aimActivity=Class.forName(activityClassName);
            Intent intent=new Intent(currentActivity,aimActivity);
            intent.putExtra(EXTRA_SECTIONNAME,sectionName);
            currentActivity.startActivity(intent);


        }catch (Exception e){
            throw  new JSApplicationCausedNativeException(
                    "Could not open the activity :" +e.getMessage()
            );
        }
    }
}
3.MapActivity   原生模块,原生模块启动React native Activity.通过Intent传递参数
4.MyMapIntentModule.java  通过getDataFromIntent 方法取得参数
  @ReactMethod
    public void getDataFromIntent(Callback successBack,Callback errorBack){
        try {
            Activity currentActivity=getCurrentActivity();
            String result=currentActivity.getIntent().getStringExtra(MapActivity.EXTRA_PERSONNAME);
            System.out.println("enter getDataFromIntent     ="+result);
            successBack.invoke(result);
        }catch (Exception e){
            errorBack.invoke(e.getMessage());
        }
    }

5.index.android.js 调用nativemodule的getDataFromIntent的方法来获取数据,方法返回类型都为void,则必须要通过回调函数来返回。

refs

https://github.com/ipk2015/RN-Resource-ipk/tree/master/react-native-docs


last update 2016-09-20

2019-04-11 08:59:20 dandoudou 阅读数 364
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58305 人正在学习 去看看 李宁

在经历一系列艰难把react-native的安卓原生环境搭建好之后,启动虚拟机又出现了bug。在点击如图所示的虚拟机启动按钮时,报错如下:emulator: ERROR: x86 emulation currently requires hardware acceleration! 看字面意思是启动虚拟机需要硬件加速,所以我做了如下几个步骤:
1.点击左侧的功能栏上面的tools->SDK Manager,如图所示:
在这里插入图片描述
在出现的显示框内选择SDK Tools,然后勾中底下的选项,如图所示:
在这里插入图片描述
之后点击ok关闭弹框。我在完成这一步之后重新运行虚拟机仍然还是会报如下错误,之后再进行下一步(已经运行成功的可不用继续)。

2.打开android Studio的安装位置,我是保存在e盘,然后进入到如下文件夹并双击如图所示的exe文件:
在这里插入图片描述
如果之前电脑内没有安装此应用程序,按照步骤安装,如果提示已安装,则不用再次安装。安装之后,重新运行虚拟机,如果可以运行,则不用进行下一步,但是我的虚拟机仍然还是报之前那个头疼的错误,那么再进行 最后一个步骤。

3.打开电脑的BIOS,进入到CPU处理器中,并将Inter(R) Virtualization Technology 的值从disabled设置为enabled,然后保存。之后重新进入程序然后运行虚拟机,运行成功,完美~
在这里插入图片描述

以上。

2019-08-27 11:37:16 Cui_xing_tian 阅读数 23
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58305 人正在学习 去看看 李宁

首先在模拟器上运行项目,打开调试菜单 ,选择Debug JS Remotely菜单项。Chrome浏览器会走动启动并打开一个React Native Debugger页面。如下图:

按住Ctrl+Shift+J打开DevTools工具,点击下图中的按钮,将项目文件夹添加到soure选项卡中。

添加了项目工程文件后,如下图:

在需要调试的地方加上断点

注意此时已经执行到断点并且停止执行了,控制台打印了断点前一行的日志,断点及断点之后的代码还没有执行。此时开发者把鼠标指向代码中的某个变量,就会显示当前这个变量的值。

上图中右上方一排的六个按钮就是断点调试中经常用到的工具。分别是(鼠标移到按钮上会显示按钮的作用):

(1) Resume script execution(快捷键 Ctrl+\),继续执行代码;

(2)Step over next function call(快捷键Ctrl+'),单步执行当前代码,执行时遇到子函数时不进入此子函数内,而是将子函数执行完后再停止。在不存在子函数的情况下与“Step out current function call”按钮效果一样。

(3) Step into next function call(快捷键Ctrl+;),单步执行当前行代码,如果遇到了子函数就进入子函数内部继续单步执行。

(4) Step out current function call(Ctrl+Shift+;),单步执行到子函数内时,按此按钮可以执行完子函数剩下的部分,返回到上层函数,等待下一个单步执行。

(5) Deactivate breakpoint (快捷键Ctrl+F8),使当前断点失效。

(6) Pause on execptions,这个按钮是一个开关,当他有效时,按钮会变为蓝色,无效时为灰色。当它有效时,如果RN代码抛出了异常,调试工具会马上暂停代码的运行,进入单步调试模式,方便开发者调试。这个功能对调试非常有用。

在Pause on exceptions按钮上方,有一个三个点的按钮,点击这个按钮,会出现弹出菜单,其中的show console drawer子菜单可以在这个页面底部打开控制台小窗口。

 

2018-08-13 00:55:12 Aman1984 阅读数 1352
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    58305 人正在学习 去看看 李宁

Win7环境 + WebStorm + react-native项目,点击运行按钮然后未在Genymotion模拟器上运行程序,WebStorm工作台输出下列错误:

Error:   Metro Bundler can't listen on port 8081

产生原因:

       计算机休眠后,在进入Windows,RN未启动

解决办法:

       命令行工具重新启动RN后,关闭命令行工具(必须要关,否则8081端口会被占用)

操作步骤:

       1. 快捷键  Win+R打开 windows运行窗口

       2. cmd+回车打开命令行工具

       3. 运行命令:react-native start

       4. 在浏览器输入网址:http://localhost:8081/index.bundle?platform=android  出现很长的一串js代码(证明rn已经运行了)

       5. (此步骤可选)cd进入工程目录,运行命令:react-native run-android  验证现在工程是否可以运行起来了(可能需要重新打开一个cmd命令行窗口进行此步操作)

       6. 关闭步骤3中的命令行窗口

       7. 回到WebStorm中点击“运行”按钮

      

react native之API学习

阅读数 1791

没有更多推荐了,返回首页