精华内容
参与话题
问答
  • 完全征服React Native

    万人学习 2016-08-22 11:47:32
    React Native是Facebook于2015年推出的跨平台开发...本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合
  • 在学习React Native的过程中,在资料比较匮乏的时候,通过官方的源码和示例是一个重要的途径。本章节讲解如何通过源代码构建和运行官方的示例程序。 一、先前准备 1.在进行源码构建之前,你应该确认你已经完成了如下...
    在学习React Native的过程中,在资料比较匮乏的时候,通过官方的源码和示例是一个重要的途径。本章节讲解如何通过源代码构建和运行官方的示例程序。
    一、先前准备
    1.在进行源码构建之前,你应该确认你已经完成了如下安装:
         Android SDK version 23(compileSdkVersion in Build.gradle)
         SDK build tools Version 23.0.1(buildToolsVersion in build.gradle)
         Android Support Repository>=17(for Android Support Library)
         Android NDK
    在Android SDK Manager中查看,并安装;

    在Android Developers(http://developer.android.com/intl/zh-cn/ndk/guides/setup.html)下载对应版本的NDK,并安装;
    2.声明你的Gradle和Andorid SDK的位置;
         声明ANDROID_SDK和ANDROID_NDK环境变量;
         或者在你的项目的根目录创建一个local.properties文件,包含如下内容;
              sdk.dir=/Users/your_unix_name/android-sdk-macosx
              ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e
    二、下载源代码
    1.使用git克隆下React Native源代码
    git clone https://github.com/facebook/react-native.git
    三、构建源代码
    1.添加Node_Modules模块
    npm install
    提示1:
    pengcx@pengcx-Ubuntu:~/ReactNativeWorkspace/react-native$ npm install
    npm ERR! Linux 3.13.0-85-generic
    npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
    npm ERR! node v4.4.2
    npm ERR! npm  v2.15.0
    npm ERR! file /home/pengcx/.npm/tr46/0.0.3/package/package.json
    npm ERR! code EJSONPARSE
    npm ERR! Failed to parse json
    npm ERR! No data, empty input at 1:1cd
    npm ERR!
    npm ERR! ^
    npm ERR! File: /home/pengcx/.npm/tr46/0.0.3/package/package.json
    npm ERR! Failed to parse package.json data.
    npm ERR! package.json must be actual JSON, not just JavaScript.
    npm ERR!
    npm ERR! This is not a bug in npm.
    npm ERR! Tell the package author to fix their package.json file. JSON.parse
    npm ERR! Please include the following file with any support request:
    npm ERR!     /home/pengcx/ReactNativeWorkspace/react-native/npm-debug.log
    处理:npm cache clean
    2.运行相应的Demo
    ./gradlew :Example:UIExplorer:android:app:installDebug
    提示2:Installing APK 'app-debug.apk' on 'm1 metal - 5.1' for app:debug
    03:39:32 E/1194330994: Error while uploading app-debug.apk : Unknown failure ([CDS]close[0])
    Unable to install /home/pengcx/ReactNativeWorkspace/react-native/Examples/UIExplorer/android/app/build/outputs/apk/app-debug.apk
    com.android.ddmlib.InstallException: Unable to upload some APKs
    at com.android.ddmlib.Device.installPackages(Device.java:956)
    ... .... 
    :Examples:UIExplorer:android:app:installDebug FAILED
    FAILURE: Build failed with an exception.
    * What went wrong:
    Execution failed for task ':Examples:UIExplorer:android:app:installDebug'.
    > com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    BUILD FAILED
    Total time: 3 mins 29.331 secs
    处理:修改项目根目录下的build.gradle文件
     classpath 'com.android.tools.build:gradle:1.2.3'
    提示3:
    pengcx@pengcx-Ubuntu:~/ReactNativeWorkspace/react-native$ sudo ./gradlew :Example:UIExplorer:android:app:installDebug
    FAILURE: Build failed with an exception.
    * Where:
    Build file '/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build.gradle' line: 3、
    * What went wrong:
    A problem occurred evaluating project ':ReactAndroid'.
    > Failed to apply plugin [id 'com.android.library']
       > Gradle version 2.2 is required. Current version is 2.11. If using the gradle wrapper, try editing the distributionUrl in /home/pengcx/ReactNativeWorkspace/react-native/gradle/wrapper/gradle-wrapper.properties to gradle-2.2-all.zip
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    BUILD FAILED
    Total time: 49.768 secs
    处理:/react-native/gradle/wrapper/gradle-wrapper.properties
    提示4:
    FAILURE: Build failed with an exception.
    * Where:
    Build file '/home/pengchengxiang/react-native/ReactAndroid/build.gradle' line: 179
    * What went wrong:
    ndk-build binary /usr/local/opt/android-ndk-r10e/ndk-build doesn't exist or isn't executable.
    Check that the $ANDROID_NDK environment variable, or ndk.dir in local.proerties, is set correctly.
    (On Windows, make sure you escape backslashes in local.properties or use forward slashes, e.g. C:\\ndk or C:/ndk rather than C:\ndk)
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    BUILD FAILED
    Total time: 7 mins 33.144 secs
    处理:sudo chmod 755 /usr/local/opt/android-ndk-r10e/ndk-build

    3.启动服务器
    ./packager/packager.sh
    提示5:
    [Hot Module Replacement] Server listening on /hot
    React packager ready.
     ERROR  EACCES: permission denied, scandir '/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/third-party-ndk/boost/boost_1_57_0'
    {"errno":-13,"code":"EACCES","syscall":"scandir","path":"/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/third-party-ndk/boost/boost_1_57_0"}
    Error: EACCES: permission denied, scandir '/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/third-party-ndk/boost/boost_1_57_0'
        at Error (native)
    for common problems and solutions.
    处理: sudo ./packager/packager.sh
    提示6:
    ERROR  A non-recoverable condition has triggered.  Watchman needs your help!
    The triggering condition was at timestamp=1462014845: inotify-add-watch(/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/tmp/expandedArchives/boost_1_57_0.zip_an0bykhqkyzseowihr2ej31lv/boost_1_57_0/boost/geometry/strategies/concepts) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl\
    All requests will continue to fail with this message until you resolve
    the underlying problem.  You will find more information on fixing this at
    {"watchmanResponse":{"version":"4.5.0","error":"A non-recoverable condition has triggered.  Watchman needs your help!\nThe triggering condition was at timestamp=1462014845: inotify-add-watch(/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/tmp/expandedArchives/boost_1_57_0.zip_an0bykhqkyzseowihr2ej31lv/boost_1_57_0/boost/geometry/strategies/concepts) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl\nAll requests will continue to fail with this message until you resolve\nthe underlying problem.  You will find more information on fixing this at\nhttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch\n"}}
    Error: A non-recoverable condition has triggered.  Watchman needs your help!
    The triggering condition was at timestamp=1462014845: inotify-add-watch(/home/pengcx/ReactNativeWorkspace/react-native/ReactAndroid/build/tmp/expandedArchives/boost_1_57_0.zip_an0bykhqkyzseowihr2ej31lv/boost_1_57_0/boost/geometry/strategies/concepts) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
    All requests will continue to fail with this message until you resolve
    the underlying problem.  You will find more information on fixing this at
        at BunserBuf.<anonymous> (/home/pengcx/ReactNativeWorkspace/react-native/node_modules/sane/node_modules/fb-watchman/index.js:95:23)
        at emitOne (events.js:77:13)
        at BunserBuf.emit (events.js:169:7)
        at BunserBuf.process (/home/pengcx/ReactNativeWorkspace/react-native/node_modules/bser/index.js:289:10)
        at /home/pengcx/ReactNativeWorkspace/react-native/node_modules/bser/index.js:244:12
        at nextTickCallbackWith0Args (node.js:420:9)
        at process._tickCallback (node.js:349:13)
    for common problems and solutions.
    处理:
    echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
    echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
    echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
    watchman shutdown-server
    4.手机端Reload JS,运行如下:





    展开全文
  • ReactNative入门到精通]React Native概述

    万次阅读 热门讨论 2015-10-11 01:15:10
    2015年9月15日,Facebook发布了 React Native for Android,...什么是React NativeReact Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 Web,iOS 和 Android 平台的原生应用。React

    2015年9月15日,Facebook发布了 React Native for Android,把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台。


    什么是React Native

    React Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 Web,iOS 和 Android 平台的原生应用。React Native 的宗旨是,学习一次,高效编写跨平台原生应用。

    官方的github地址为:https://facebook.github.io/react-native/


    React Native有什么优点

    1.提供了原生的控件支持

    使用 React Native 你可以使用原生的控件,入在iOS平台我们可以使用UITabBar控件,在Android平台我们可以使用Drawer控件。这样,就让我们的App从使用上和视觉上拥有像原生App一样的体验。而且使用起来也非常简单。

    2.异步执行

    所有的JavaScript逻辑与原生的代码逻辑都是在异步中执行的。原生的代码逻辑当然也可以添加自己的额外的线程。

    这个特性意味着,我们可以将图片解码过程的线程从主线程中抽离出来,在后台线程将其保存在磁盘中,在不影响UI的情况下计算调整布局等等。

    所以,这些让React Native开发出来的App都是较为的流畅。

    这个之间的通信过程也是有序列化来完成的,这个就让我们可以使用Chrome Developer Tools 来完成JavaScript逻辑的调试,当然我们也能够在模拟器和物理设备上调试。

    3.触屏处理
    React Native实现了高性能的图层点击与接触处理。

    4.Flexbox的布局样式
    使布局将变得更简单,这就使我们为什么要将网页的布局模式切换到React Native的Flexbox布局模式。Flexbox让UI布局变得简单,入使用margin和padding的嵌套模式。当然,React Native 同样也支持网页原生的一些属性布局模式,如FontWeight之类的。这些声明的布局和样式,都会存在内联的机制将其优化。

    5.Polyfills机制
    React Native也支持我们使用第三方的JavaScript库,来方便我们的开发。支持npm中的成千上万的模块。

    6.基于React JS
    拥有React JS的优良特性。


    跨平台框架这么多?为什么重点关注React Native?

    如我们之前所介绍的,Android与IOS跨平台开发框架如此这多,如之前我们介绍的PhoneGap、Xamarin等,为什么我们重点的关注React Native呢?

    1. Facebook所开源的框架
      我们知道,所有的开源框架,只有是一线的大公司研发出来的才能够保证框架的维护性、可用性。当然,这样也会吸引更多的开发者使用这个框架,才能够使我们在人才储备上有人可用。并不是说,框架多好就能够用的。如国内的CrossApp,虽然很好用,但是知名度不够,造成我们研发、bug反馈、人才招聘上的种种窘境。

    2. React JS技术的革命
      这个东西也就是国内的很多跨平台框架没有关注的地方,Facebook使用了React JS已经有了好几年的技术变革,特别是JSX与Virtual DOM的加入,给使用JavaScript来开发Native App简直是一个质的飞跃。

    3. BAT团队已经投入研发与使用
      如果很多中小型公司,看不清方向,这个我们倒是可以模仿BAT的脚步。现在的BAT公司内部,特别是A,已经投入了大量的人力在React Native上面,听说TMall App已经开始使用React 进行重构。

    我们可以看到,目前对于Facebook来说,他们的新业务线也将直接使用了React Native的开发模式


    搭建React Native 的 Windows 环境

    NodeJs、Python、Android SDK、JDK

    由于我们大天朝网络的限制,很多依赖的库都fetch不下来。所以整个React Native的环境搭建,命令执行都是一个痛苦的过程。(就连NodeJS我都快下了半天的时间)

    我在Windows平台上搭建环境弄了差不多一周的时间,都没有弄下来,特别是下面这个问题一直困扰着我

    bash: ulimit: open files: cannot modify limit: Too many open files

    后面得到了高人的指点,借给我了一个梯子,并在我的Mac设备上成功的运行了自己的第一个React Native项目。哭~~~

    下面是我的运行步骤,大多数是和官方的介绍一样的:

    我们先从Github上获取React Native的代码

    github地址:https://github.com/facebook/react-native

    git clone https://github.com/facebook/react-native.git

    进入React Native 并使用npm 进行安装

    npm install -g react-native-cli

    注意
    - 使用npm进行安装,需要搭建好完整的nodejs环境,nodejs地址:https://nodejs.org
    - npm install 需要依赖于很多国外资源,自备翻墙梯子


    新建自己的React Native项目,这里命名为AwsomeProject

    react-native init AwsomeProject

    运行完后,如果环境变量没有配置错误,react 将会帮我们生成一个AwsomeProject的文件夹目录。

    里面内如如下所示:


    运行Android App

    $ cd AwesomeProject
    $ react-native run-android

    看起来很简单的两句命令,但是里面隐藏这很多的陷阱。
    - 确保Gradle的环境配置好了,这里还会动态的down很多Gradle的依赖文件,不翻墙估计依赖文件都下不下来
    - 需要安装好自己的Python环境(怎么安装google吧),React Native 的 packager需要 python的支持
    - 这个东西,只能运行在Android模拟器上,真机运行必须失败,至于为什么后面在介绍

    注意好上面三点,就能在模拟器上看到如下画面了


    运行iOS App

    ios相对就简单了很多,直接打开 ios/AwesomeProject.xcodeproj 文件,使用Xcode编译运行就能出现和Android类似的界面了。我的效果如下:

    注意,同样只能够在模拟器上运行

    React Native的优势和劣势:(转):

    React Native的优势

    相对Hybird app或者Webapp:

    • 不用Webview,彻底摆脱了Webview让人不爽的交互和性能问题
    • 有较强的扩展性,这是因为Native端提供的是基本控件,JS可以自由组合使用
    • 可以直接使用Native原生的「牛逼」动画(在FB Group这个app里面,面板滑出带一点果冻弹动,面板基于某个点展开这种动画随处可见,这种动画用Native code来做小菜一碟,但是用Web来做就难上加难)。

    相对于Native app:

    • 可以通过更新远端JS,直接更新app,不过这快成为各家大型Native app的标配了…

    劣势

    • 扩展性仍然远远不如web,也远远不如直接写Native code(这个不用废话解释了吧)
    • 从Native到Web,要做很多概念转换,势必造成双方都要妥协。最终web要用一套CSS的阉割版,Native要费劲地把这个阉割版转换成native原生的表达方式(比如iOS的Constraint\origin\Center等属性),两边都会不爽。

    /*
    * @author zhoushengtao(周圣韬)
    * @since 2015年9月30日 凌晨 1:00:20
    * @weixin stchou_zst
    * @blog http://blog.csdn.net/yzzst
    * @交流学习QQ群:341989536
    * @私人QQ:445914891
    /
    这里写图片描述

    展开全文
  • 先上代码,配合代码讲解一下使用方法, 我这有用到一个屏幕适配工具类,自己写的,使用方法和代码 请点这里 ...import React from 'react'; import { Text, StyleSheet, View, TouchableOpacity, Image...

    先上代码,配合代码讲解一下使用方法,
    github地址:https://github.com/lizhuoyuan/react-native-navigationBar
    我这有用到一个屏幕适配工具类,自己写的,使用方法和代码 请点这里

    这里写图片描述
    这里写图片描述

    /**
     * Created by 李卓原 on 2018/7/6.
     * email: zhuoyuan93@gmail.com
     *
     */
    
    import React from 'react';
    import {
        Text,
        StyleSheet,
        View,
        Image,
        ImageBackground,
        TouchableOpacity,
        Platform,
        StatusBar,
        ViewPropTypes
    } from 'react-native';
    
    //ScreenUtil 为屏幕尺寸适配的工具类
    import * as ScreenUtil from "../utils/ScreenUtil";
    import PropTypes from 'prop-types';
    
    
    const NAV_BAR_HEIGHT_ANDROID = 50;
    const NAV_BAR_HEIGHT_IOS = 44;
    
    const StatusBarShape = {
        barStyle: PropTypes.oneOf(['light-content', 'default', 'dark-content']),
        hidden: PropTypes.bool,
        backgroundColor: PropTypes.string,
    };
    
    class NavigationBar extends React.Component {
    
        static propTypes = {
            statusBar: PropTypes.shape(StatusBarShape),
    
            showBackgroundIMG: PropTypes.bool,
    
            style: ViewPropTypes.style,
            title: PropTypes.string,
            titleView: PropTypes.element,
            titleLayoutStyle: ViewPropTypes.style,
    
            showLeft: PropTypes.bool,
            leftText: PropTypes.string,
            leftTextStyle: ViewPropTypes.style,
            showleftImg: PropTypes.bool,
            leftButton: PropTypes.element,
    
            showRight: PropTypes.bool,
            rightText: PropTypes.string,
            rightTextStyle: ViewPropTypes.style,
            rightButton: PropTypes.element,
        };
    
        static defaultProps = {
            statusBar: {
                barStyle: 'default',
                hidden: false,
            },
            showLeft: true,
            showleftImg: true,  //是否显示返回箭头
            leftText: '',   //返回键位置的文字
            showRight: false,
            rightText: '更多',
            showBackgroundIMG: true  //是否有背景图片
        };
    
        constructor(props) {
            super(props);
        }
    
        render() {
            let leftButton = this._renderLeft();
            let rightButton = this._renderRight();
            let statusBar = <View>
                <StatusBar {...this.props.statusBar}/></View>;
            let titleView = this.props.titleView ? this.props.titleView :
                <Text style={[styles.titleStyle, this.props.titleLayoutStyle]}>{this.props.title}</Text>;
            let content = <View style={styles.content}>
                {leftButton}
                <View style={styles.titleView}>{titleView}</View>
                {rightButton}
            </View>;
            return (
                <ImageBackground source={this.props.showBackgroundIMG ? require('IMG/app_bar.png') : null}
                                 style={[styles.container, this.props.style]}>
                    {statusBar}
                    {content}
                </ImageBackground>
            )
        }
    
        _renderLeft() {
            let {leftButton, leftTextStyle, showLeft, navigation, onLeftClick, leftText, showleftImg} = this.props;
            if (!showLeft) {
                return null;
            }
            if (leftButton == null) {
                return (
                    <TouchableOpacity onPress={() => {
                        if (onLeftClick) {
                            onLeftClick();
                        } else {
                            if (navigation) navigation.goBack()
                        }
                    }}>
                        <View style={styles.leftContainer}>
                            {
                                showleftImg ?
                                    <Image source={require('IMG/back.png')}
                                           style={{
                                               width: ScreenUtil.scaleSize(25),
                                               height: ScreenUtil.scaleSize(25)
                                           }}/>
                                    : null
                            }
                            <Text style={[styles.leftRightStyle, leftTextStyle]}>{leftText}</Text>
                        </View>
                    </TouchableOpacity>)
            }
            return leftButton;
        }
    
        _renderRight() {
            let {rightButton, rightTextStyle, showRight, onRightClick, rightText} = this.props;
            if (!showRight) {
                return null;
            }
            if (rightButton == null) {
                return (
                    <TouchableOpacity onPress={() => {
                        if (onRightClick) {
                            onRightClick()
                        }
                    }}>
                        <View>
                            <Text style={[styles.leftRightStyle, rightTextStyle]}>{rightText}</Text>
                        </View>
                    </TouchableOpacity>)
            }
            return rightButton;
        }
    }
    
    /**
     * //selector:这是你自己编写的一个函数。这个函数声明了你的组件需要整个 store 中的哪一部分数据作为自己的 props
     * 如果用不到redux这个方法可以删除
     * @param store
     * @returns {{color: *}}
     */
    function changeColor(store) {
        return {
            color: store.changeColorReducer.color
        }
    }
    
    
    const styles = StyleSheet.create({
        container: {
            //backgroundColor:'green',
            width: ScreenUtil.screenW,
            height: ScreenUtil.scaleSize(58),
            justifyContent: 'center',
        },
        content: {
            justifyContent: 'space-between',
            flexDirection: 'row',
            alignItems: 'center',
            height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
        },
        titleView: {
            justifyContent: 'center',
            alignItems: 'center',
            position: 'absolute',
            left: 40,
            right: 40,
            top: 0,
            bottom: 0,
        },
        titleStyle: {
            fontSize: ScreenUtil.setSpText(18),
            color: 'white'
    
        },
        leftRightStyle: {
            color: 'white',
            fontSize: ScreenUtil.setSpText(14)
        },
    
        leftContainer: {
            marginLeft: ScreenUtil.scaleSize(17),
            flexDirection: 'row',
            alignItems: 'center'
        }
    });
    
    // 包装 component ,注入 dispatch 和 state 到其默认的 connect(selector)(App) 中;
    /**
     * 把这个组件用connect包裹住就能拿到store。
     注意export default已经拿到下面来了,上面的class前面的导出要删掉
     用redux的话需要第一种方法导出,已注释掉
     */
    //export default connect(changeColor)(withNavigation(NavigationBar));
    //用不到redux推荐在定义类的时候直接导出,类定义为 export default class ...
    
    //当这个组件拿不到this.props.navigation时,可使用withNavigation
    //withNavigation是一个更高阶的组件,它将导航道具传递给一个包装组件。
    //当您无法直接将导航道具传递到组件时,或者在深度嵌套子节点的情况下不希望传递导航道具时,它非常有用。
    //导出方式:export default withNavigation(NavigationBar);
    export default NavigationBar;

    关于withNavigation的使用

    在页面使用:

    常规页面插入

        render() {
            return (
                <View style={{flex: 1}}>
                    {this._renderNav()}
                    ...
                </View>
            )
        }
    
        _renderNav() {
            return (
                <NavigationBar
                        title={'Main'}
                        //showLeft={false}
                        onLeftClick={()=>{
                                       alert('a')
                                   }}
                        leftButton={()=><View><Text>自定义左侧按钮</Text></View>}
                        statusBar={{
                            barStyle: 'dark-content',
                            backgroundColor: 'white',
                            hidden: false,//true则隐藏
                        }}
    
                    />
            )
        }

    配合ReactNavigation使用

    const RootStack = createStackNavigator({
        TaskList: {screen: TaskListPage},
        TaskDetails: {screen: TaskDetailsPage}
    }, {
        navigationOptions: ({navigation}) => ({
            header: <NavigationBar title={navigation.state.routeName}
                                   showLeft={navigation.state.routeName !== 'TaskList'}
                                   navigation={navigation}
            />
        })
    });

    属性:

    Prop Type Default Description
    style ViewPropTypes.style - 标题栏的样式
    showBackgroundIMG bool true 背景为一个图片
    title string - 标题使用的字符串
    titleLayoutStyle ViewPropTypes.style - 标题文字的样式
    titleView PropTypes.element - 替换标题文字的组件
    leftButton PropTypes.element - 自定义左侧按钮
    leftText string - 左侧返回按钮的文字
    leftTextStyle ViewPropTypes.style - 替换标题文字的组件
    showLeft bool true 是否显示返回按钮
    leftImg source的参数 ImageSourcePropType 左侧图片的地址
    showleftImg bool true 是否显示标题的后退按钮,需自行替换成其他Image
    showLeft bool true 是否显示返回按钮
    onLeftClick func this.props.navigation.goBack() 左侧按钮的点击事件(默认为ReactNavigation的goback)
    showRight bool false 是否显示右侧按钮
    rightText string 更多 右侧按钮的文字
    rightImg source的参数 ImageSourcePropType 右侧图片的地址,默认不传则不显示
    rightTextStyle ViewPropTypes.style - 是否显示返回按钮
    rightButton PropTypes.element - 自定义右侧按钮
    onRightClick PropTypes.func - 右侧按钮的点击事件
    statusBar { barStyle: PropTypes.oneOf([‘light-content’, ‘default’, ‘dark-content’]), hidden: PropTypes.bool, backgroundColor: PropTypes.string,} { barStyle: ‘default’, hidden: false,} 自定义状态栏

    可以自己传入statusBar,默认值为:

     statusBar: {
                barStyle: 'default',
                hidden: false, //true则隐藏statusBar
            }

    样式大概如此,颜色可以自己定义,
    左侧按钮,中间文字,和右侧按钮都可以自己传入一个自己写的布局。
    后续会完善功能和方法。

    github地址

    展开全文
  • React Native -19 Timer定时器的使用 背景:React Native Version:0.3.1 语法 ES6 Step1:介绍RN的定时器就是一个创建方法。并没有像iOS一样的NSTimer类 根据官方提供的文档,定时器有四种形式: • setTimeout,...

    React Native -19.React Native Timer定时器的使用

    背景:React Native Version:0.3.1
    语法 ES6

    Step1:介绍

    RN的定时器就是一个创建方法。并没有像iOS一样的NSTimer类
    根据官方提供的文档,定时器有四种形式: • setTimeout, clearTimeout
    • setInterval, clearInterval
    • setImmediate, clearImmediate
    • requestAnimationFrame, cancelAnimationFrame

    • 见名思义:set和request方法是创建。clear是清除,清除必须有.

    Step1:使用

    • setTimeout(function, time)

      function:触发的方法
      time:延迟时间 毫秒
      效果:延迟time时间后执行function,

    • setInterval(function,time)

      function:触发的方法
      time:延迟时间 毫秒
      效果:间隔time时间后执行function

    • setImmediate(function,time)

      function:触发的方法
      time:延迟时间 毫秒
      效果:间隔time时间后(立即)执行function,

    • setImmediate此方法会在js代码块之行结束后执行,就在就要发送批量相应数据到原生之前,如过再方法中又掉用了此方法,他会立即呗掉用。而不会再掉用之前等待原生代码

      以上这句话从官网文档翻译过来,等待以后实际验证。

    Step2:实战

    import React,{Component} from 'react';
    import {AppRegistry,StyleSheet,ActivityIndicator} from 'react-native';
    
    class hello extends Component {
      constructor(props:any){
        super(props);
        var timer1=null;
        var timer2=null;
        var timer3=null;
        this.state = {
          animating: true,
        };
      }
    
      componentDidMount(){
        this.timer1 = setInterval(
          ()=>{
            this._consolelogshow();
          },
          2000,
        );
    
        this.timer2 = setTimeout(
          ()=>{console.log('setTimeout22222222'); },
          1000,
        );
    
        this.timer3 = setImmediate(
          ()=>{console.log('setImmediate333333');},
          3000,
        );
      }
    
      componentWillUnmount() {
        // 如果存在this.timer,则使用clearTimeout清空。
        // 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear
        this.timer1 && clearInterval(this.timer1);
        this.timer2 && clearTimeout(this.timer2);
        this.timer3 && clearImmediate(this.timer3);
    
      }
    
      _consolelogshow(){
        console.log('把一个定时器的引用挂在this上11111');
      }
    
      render(){
        return(
          <ActivityIndicator
            animating={this.state.animating}
            style={[styles.centerting,{height:80}]}
            size="large"/>
        )
      }
    }
    
    
     var styles = StyleSheet.create({
       centering: {
        alignItems: 'center',
        justifyContent: 'center',
        padding: 8,
       }
     });
    
    AppRegistry.registerComponent('hello',()=>hello);
    

    Step3:实战解读

    • componentDidMount 在生命周期组件加载成功后的方法里创建三个定时器。
    • constructor 方法中声明三个定时器变量,方便全局掉用
    • componentWillUnmount 在生命周期组件将要移除的方法里清除定时器。避免crash
    展开全文
  • UI组件一、目前React-Native支持的组件在facebook React-native的官网可以看到目前支持的组件如下: https://facebook.github.io/react-native/docs/getting-started.html#content 二、如何正确运行UI组件Example...
  • React Native架构的无论是Android APP还是iOS APP,在启动时都出现白屏现象,时间大概1~3s(根据手机或模拟器的性能不同而不同)。 问题分析: 为什么会产生白屏? React Native应用在启动时会将js bundle读取...
  • ReactNative教程 — Hello React Native

    千次阅读 2016-10-31 12:01:11
    ReactNative教程 — Hello React Native
  • 一 摘要最近发现好多同事朋友,都在研究React Native,React Native会越来越多的公司开始研究、使用。也许是今后一个趋势。这个技术主要利用js与原生(iOS Android)进行混编,解决HTML5 开发的APP短板问题.下面我们来看...
  • 在Windows平台上开发React Native需要安装以下环境和工具: 1. Note.js 2. React Native Command Line Tools 3. Android Studio
  • 一、了解index.ios.js大家都清楚,React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发,开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。目前...
  • UI组件一、目前React-Native支持的组件在facebook React-native的官网可以看到目前支持的组件如下: https://facebook.github.io/react-native/docs/getting-started.html#content 二、如何正确运行UI组件Example...
  • React Native初级入门到项目实战

    万人学习 2016-10-13 13:52:46
    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互...
  • iOS React Native 混合开发集成React Native

    千次阅读 2017-07-24 17:47:51
     有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。 先看一下我集成完之后的项目目录: 首先安装React Native node组件  1、新建一个文件夹如目录中的RN,这个...
  • React Native学习一:初识React Native

    千次阅读 2017-01-12 17:11:54
    React Native概述什么是React NativeReact Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)...
  • React Native 项目目录解析 上一节我们简单的新建了一个React Native的项目AwsoneProject,我们什么都没有操作,就直接在模拟器上运行起来了。这里我们详细的看看,React Native给我们生成的这几个文件到底是做什么...
  • 概述本文是基于目前公司的一个真实项目编写的,由于是边...引入React Nativebuild.gradle配置compile 'com.facebook.react:react-native:+'react-native的res使用到了23sdk的资源,因此编译的sdk要求是23compileSdkVe
  • 我们上两节学习了CSS的伸缩属性标签的作用和效果实现,这一节我们顺势学习一下在React Native 中是使用flexbox React Native 中的主要flexbox属性介绍 alignItems alignSelf flex flexDirection flexWrap ...
  • 学习React Native时,总是会将样式的设置和JavaScript的样式设置混淆。特地总结一下使用上的问题并将其与CSS样式进行对比。    React Native中文网上明确说React Native的样式就是JavaScript的样式,只是按照JS的...
  • 在Mac平台上开发React Native需要安装以下环境和工具: Note.js React Native Command Line Tools XCode/AndroidStudio
  • 然后配置完成后,继续执行react-native run-android 运行了好几次还是这个错误信息,瞬间懵逼...网上查了好久也都没有找到解决方案,最后在一个技术交流群里找到了答案 忘了关掉cmd重新开一个窗口. 因为没有重新...
  • React Native开发一 webstorm搭建React Native开发环境

    万次阅读 热门讨论 2017-12-16 17:50:29
    1 前言最近打算真的开始学习一下跨平台APP开发,一直在关注RN,因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了,笔者在一家传统公司)。...需要的开发环境主要有node.js + react native +
  • [ReactNative]ReactNative学习资源整合

    千次阅读 2016-08-30 22:15:20
    RN学习网站: ReactNative官网:...ReactNative中文网:http://reactnative.cn/ 江清清RN技术专栏:http://www.lcode.org/react-native/(环境搭建,基础组件和常用API学习,RN开源项目,技术周报...)
  • 一 摘要上一篇文章,介绍了如何在MAC电脑上搭建React Native运行环境,环境搭建好了,接下来这篇给大家介绍一下如何创建自己的工程项目. 二 具体步骤第一步 创建HelloWord工程第三步 运行工程1.目录结构2.打开ios目录...
  • React Native运行原理解析

    万次阅读 多人点赞 2016-09-22 15:54:18
    Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架。本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建...
  • 【React Native】- ReactNative的版本升级

    千次阅读 2017-06-13 17:54:12
    在低版本项目中使用高版本组件时,会报错,因此我们需要时刻升级我们的ReactNative版本,在获得更多API,组件的同时, 避免出现兼容问题错误。可以通过react-native -v查看当前版本信息。
  • 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布。
  • import React, {Component} from 'react'; import { AppRegistry, Platform, StyleSheet, View, Text, Image, Dimensions, PixelRatio, } from 'react-native'; const instructio...
  • 本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错。笔者目前公司是采用 APICloud 进行移动应用开发(人少 + 应用要求低),不过确实也有很多的性能瓶颈...

空空如也

1 2 3 4 5 ... 20
收藏数 49,756
精华内容 19,902
关键字:

reactnative