2018-05-20 21:35:53 qq_35394891 阅读数 66
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5635 人正在学习 去看看 李文瀚

异常1 undifind is not an object(evaluating 'navigation.navigate')

 onPress ........32:29

注意:这里的报错地点不是正确的,当然有的时候是正确的, 一般报错是由于程序指定位置和终止位置之前,这里

navigation.navigate("FlatList")

报错的具体位置是FlatList,但它是从StackNavigator中注册获取到的,所以它的错误在于StackNavigator中,经过分析,原来是没有将StackNavigator 的实例 AppRoot注册导致的

异常2: 错误的定位为js的class名字上

原因:自己把class的名字和应用的组件名字弄一样了

注意:js的文件名字不要和其他引用组件的名字一样


2018-02-25 23:59:14 YANGDAHUAN 阅读数 1202
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5635 人正在学习 去看看 李文瀚

    我们开发任何软件都逃不过调试,ReactNative也不例外,那么如何调试呢?

    1、打开谷歌浏览器设置

        

    2、打开扩展程序商店

        

    3、搜索扩展程序react developer tools

    

    4、安装

    5、运行程序

在运行带RN的工程后,当前页面下ios模拟器通过cmd+D(真机可以通过摇一摇),android通过Menu按键,调出RN的开发者菜单


点击后会打开谷歌浏览器


如果浏览器打开了但是没有跳转任何页面,则自己在地址栏输入http://localhost:8081/debugger-ui/

然后跟着浏览器的提示⌘⌥I


Console是看日志的地方,Source这边可以打断点,运行时会自动在断点处停止


2016-10-12 17:53:10 hsbirenjie 阅读数 13854
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5635 人正在学习 去看看 李文瀚

今天我们来说下RN对键盘事件的支持。

在react-native 的Component组件中有个Keyboard.

github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard


我们先来看下官方提供的例子,监听键盘的弹出与消失。Demo如下:

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow () {
    alert('Keyboard Shown');
  }

  _keyboardDidHide () {
    alert('Keyboard Hidden');
  }

  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}


Keyboard支持的监听事件如下:

@param {string} nativeEvent The `nativeEvent` is the string that identifies the event you're listening for.  This can be any of the following:
- `keyboardWillShow`
- `keyboardDidShow`
- `keyboardWillHide`
- `keyboardDidHide`
- `keyboardWillChangeFrame`
- `keyboardDidChangeFrame`

使用的时候需要测试下Android和iOS下监听的事件是否都ok。

踩坑如下:

Android 对keyboardWillShow 监听不到。


同样,我们在源码里可以找到使键盘消失的函数

  /**
   * Dismisses the active keyboard and removes focus.
   */
  dismiss () {
    dismissKeyboard();
  }


我们如果需要使用时,可以如下:

const dismissKeyboard = require('dismissKeyboard’);
dismissKeyboard();


2016-11-15 09:50:25 onResume 阅读数 435
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5635 人正在学习 去看看 李文瀚
1.安装java jdk 配置环境变量 JDK1.8或以上
2.安装android_sdk ,设置ANDROID_HOME

   ANDROID_HOME  D:\AndroidSDK  注意结尾不需要分号

3.安装c++环境 (windows默认有)
4.安装nodejs与git
    nodejs:下载地址 nodejs.org //自动添加环境变量
    git :下载点 这里,git下载
5.在安装好nodejs后,设置全局镜像
    npm config set registry https://registry.npm.taobao.org
    npm config set disturl https://npm.taobao.org/dist
6.安装React Native命令行工具
    github上下载facebook发行的: https://github.com/facebook/react-native
    解压下载好的zip,cmd命令行进入react-native-cli
    git命令行 执行 npm install -g react-native-cli

这一步有的童鞋下载可能会比较慢,下载慢的可以去这    里
7.创建项目:
    进入项目目录
    执行 react-native init projectName 如:react-native init HelloWorld
8.设置gradle的编译环境
    gradle的版本  就是一个zip压缩包  需要解压一下
   环境变量的配置 GRADLE_HOME 需要指定到解压后的文件目录里 类似:/Users/dfy/Desktop/gradle-2.4
   并把%GRADLE_HOME%/bin放到Path里面    检查是否成功:gradle -v
  修改rn项目里面android\gradle\wrapper\gradle-wrapper.properties文件里关于gradle的配置路径 设置到本地

GRADLE_HOME  E:\RNGradle\gradle-2.10 
distributionUrl=file:///E:/gradle-2.10-all.zip  三个杠 
distributionUrl=file:///Users/dfy/Desktop/gradle-2.4-all.zip

  文件比较大,只能提供百度云的下载了,360被某讯举报,没办法百度慢点,就凑活吧。
链接:http://pan.baidu.com/s/1jHTbxf4 密码:8ui2
9.运行项目:
    进入项目目录:
    执行 react-native start
    可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本
10.准备模拟器或真机 运行android   
   react-native run-android

运行时可能出现的问题汇总:
    
    问题:找不到sdk  或者 无法正常化 sdk路径  解决办法:环境变量 
    问题:failed to find target with hash string 'android-23' in: F:\Android_SDK    解决版本:更新23版本的sdk
    问题:build成功后是红色的:没有连接服务器js Server  解决方法:ip地址+8081端口  例子:192.168.1.100:8081
    问题: 根据studio的版本,打开android目录下的gradle文件,设置成对应的版本
    如:我的是
    dependencies {
        classpath 'com.android.tools.build:gradle:2.0.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }



    
2018-09-06 17:00:23 u011397539 阅读数 226
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5635 人正在学习 去看看 李文瀚

1 需要准备 去苹果官网  申请 证书

详细说明:http://www.jianshu.com/p/01224fc523d4

 

2 设置 App图片 以及  启动页

 

3 在xcode  按 command + , 快捷键 注意 +  下载自己的 Provisioning Profile 

 

4 选择项目 点击 General  取消勾选 Auto  选择自己的Provisioning Profile

 

5。点击选择 模拟器旁边得按钮

 

 

6 选择 Edit Scheme

将 debug改为  release

 

ReactNative总结

阅读数 172

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