2017-08-22 17:45:07 zww1984774346 阅读数 1052
  • APP渗透测试之代理篇

    本课程就APP渗透测试中的服务端测试进行讲解,课程中讲解如何使用夜神模拟器,如何抓取app中的http协议流量及HTTPS协议流量。结合web服务端测试,通过抓取的流量进行修改来完成服务端渗透测试。

    48 人正在学习 去看看 铭智

最近新建React Native项目出现了这样的错误

这里写图片描述

编译总是报错,找到了解决方案,特此记录。

错误原因:
babel-preset-react-native version : @3.0.0 存在问题导致的

解决方案:

1、在package.json中添加“babel-preset-react-native”: “2.1.0”

"dependencies": {
  "react": "16.0.0-alpha.12",
  "react-native": "0.47.1",
  "babel-preset-react-native": "2.1.0"  --------->Here
},

2、安装插件,重启服务

$ npm install
$ npm start -- --reset-cache

或者执行以下命令后重启服务

命令1:

$ yarn remove babel-preset-react-native
$ yarn add babel-preset-react-native@2.1.0 

或者
命令2:

$ npm uninstall --save-dev babel-preset-react-native
$ npm install babel-preset-react-native@2.1.0

参考地址: https://github.com/facebook/react-native/issues/15513

2017-10-21 10:49:52 kangguang 阅读数 458
  • APP渗透测试之代理篇

    本课程就APP渗透测试中的服务端测试进行讲解,课程中讲解如何使用夜神模拟器,如何抓取app中的http协议流量及HTTPS协议流量。结合web服务端测试,通过抓取的流量进行修改来完成服务端渗透测试。

    48 人正在学习 去看看 铭智

React Native 提供以下的常用API

Alert:跨平台的提示框

AppRegisty:注册React Native 应用的入口

AsyncStorage:React Native 提供的键-值存储系统。

Dimensions:用于获取设备的屏幕宽高

Platform:用于获取设备当前运行的平台名称

StyleSheet:提供了一种类似CSS样式表的抽象。

定时器:setInterval/clearInterval 创建和销毁定时器


一、屏幕设置相关API

 新建Screen.js文件

 1.获取屏幕宽高:Dimensions:

  


 



2 获取屏幕分辨率 PixeRatioo API

 


知识点:

  屏幕尺寸是指手机屏幕对角线的英寸数;屏幕分辨率是指屏幕宽高像素数;屏幕像素密度是指手机屏幕对角线上单位英寸内的像素数。

  屏幕分辨率 = 屏幕宽高 * 屏幕缩放比例

  常见设备的屏幕缩放比例为:

 

运行效果


二 动画 API

    RequestAnimationFrame:是个简单粗暴的动画API,通过不断改变state的值,来实现组件的动画效果

    LayoutAnimation:体验和性能更好,适用于全局的动画配置,实现单个动画非常简洁方便

    Animated: 最强大的动画API,适用于实现灵活丰富的动画效果,例如多个动画的组合动画。


  1.RequestAnimationFrame  API 帧动画

     创建Animation.js

   

   调用类

    

  运行效果

 

再次对 Animation.js修改

运行效果动画不明显而且显得生硬,实现不了“淡入淡出”和“弹性动画”

2.LayoutAnimation API布局动画

   当组件的布局变化时,会自动将组件运行到新的位置上。

    使用LayoutAnimation 的常用方法是 调用 .LayoutAnimation.configureNext,然后使用setState设置组件的属性

    configureNext函数用于配置动画效果:

      duration:动画时长

      create:组件创建时的动画

      updata:组件更新时的动画

      delete:组件销毁时的动画


     动画类型:

       spring: 弹跳

       linear:线性

       easeInEaseOut:缓入缓出

       easeIn:缓入

       easeOut:缓出

   opacity:透明度

   scaleXY:缩放

   对Animation.js修改

  

  运行后动画效果明显而且柔和。


 3.Animated API 动画

   Animated仅关注动画的输入与输出声明,在其中建立一个可配置的变化函数,然后使用简单的start()/stop()方法来控制动画按顺序执行。

   使用Animated 最简单的工作流程就是创建一个Animated.Value,将其绑定到组件的一个或多个样式属性上。然后可以通过动画驱动它,例如 Animated.timing,或通过Animated.event将其关联到一个手势上,例如拖动或者滑动操作。除了样式,Animated.value还可以绑定到props上。

    Animated 动画类型:

       spring:弹跳

       timing:渐变

       decay:以一个初始速度开始并且逐渐减慢停止

    Animated动画支持的组件有以下几种

       Animated.Text

       Animated.Image

       Animated.View

    3.1跳弹动画

        创建Animated.js文件

       

在其他文件中引用运行。

3.2 串行动画   

    创建AnimatedThrough.js

   

  

       在其他文件中引入运行

  

      


3.3 并行动画

    再做一次简单的修改

   

 动画简单的学习完毕,实际开发中还得看需求而定!


二、其他更加丰富的API

1.AlertIOS 提示框

2.Geolocation 定位

3.Keyboard

4 NetInfo 设备网络状态


2017-01-11 16:20:33 jyt199011302 阅读数 1199
  • APP渗透测试之代理篇

    本课程就APP渗透测试中的服务端测试进行讲解,课程中讲解如何使用夜神模拟器,如何抓取app中的http协议流量及HTTPS协议流量。结合web服务端测试,通过抓取的流量进行修改来完成服务端渗透测试。

    48 人正在学习 去看看 铭智

一. 关于TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。

最简单的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件,譬如onSubmitEditing和onFocus。

二.TextInput常见的属性

因为TextInput继承自UIView,所以View的属性TextInput也能使用。

value 字符串型 文本输入的默认值
onChangeText 函数 监听用户输入的值, 此属性接受一个函数,而此函数会在文本变化时被调用。

keyboardType 键盘类型 决定打开哪种键盘,例如数字键盘等
password 布尔型 如果值为真,文本输入框就形成一个密码区域。默认值为假。
onSubmitEditing 会在文本被提交后(用户按下软键盘上的提交键)调用。
multiline 布尔型 如果值为真,文本输入可以输入多行。默认值为假。
placeholder 字符串型
placeholderColer 字符串型
onBlur 当文本输入时模糊的,调用回调函数
onEndRditing
onFocus 当输入的文本是聚焦状态时,调用回调函数
secureTextEntry 布尔型 如果值为真,文本输入框就会使输入的文本变得模糊,以便于像密码这样的敏感文本保持安全。默认值为假。
onBlur 当文本输入时模糊的,调用函数

示例 :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
export default class TextInputDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
            style={styles.inputStyle}
            // value={'我是默认文字'}
            keyboardType={'number-pad'}
            // 多行显示
            // multiline={true}
            // password={true}
            placeholder={'我是占位文字'}
            clearButtonMode={'always'}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },

    inputStyle:{
        marginTop:30,
        width:300,
        height:60,
        // 背景
        // backgroundColor:'black',
        // 边框
        borderWidth:1,
        borderColor:'#e8e8e8'
    }
});

AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);
2017-05-09 11:45:44 qq_16559905 阅读数 1382
  • APP渗透测试之代理篇

    本课程就APP渗透测试中的服务端测试进行讲解,课程中讲解如何使用夜神模拟器,如何抓取app中的http协议流量及HTTPS协议流量。结合web服务端测试,通过抓取的流量进行修改来完成服务端渗透测试。

    48 人正在学习 去看看 铭智

React Native 路由

因 React Native 版本设计到0.44之后,原先的 RN 路由完全失效了,首先我先附上原先路由写法,下面为原先路由代码:

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { StatusBarIOS,Platform } from 'react-native';
import { createMemoryHistory, Router, IndexRoute, Route } from 'react-router';
import { createNavigatorRouter } from 'react-native-navigator-router';


<Provider store={store}>
    <Router history={createMemoryHistory('/')}>
        <Route path='/' component={createNavigatorRouter()}>
            <IndexRoute component={App} />
            <Route path="/about" component={AllRoute} />
        </Route>
    </Router>
</Provider>

因长时间习惯使用 Vue 与 React 的 路由,网上查询各种资料,找出类似 Vue/React的路由使用。但是React Native 升级到0.44 之后,运行直接报错,createMemoryHistory('/') 异常, 也许是我的使用不当,或者说是环境原因,期间我也打开node_model研究过一番,也没整明白,总之呢,无法使用。


接下来,我将附上我的 RN 路由代码:

目录介绍

路由配置共分为两个文件:

1、路由(routes.js文件 )。

2、路由配置routesConfig.js文件。

下面为两文件的代码:


1、routes.js 文件代码:

这个文件主要是用于处理 Navigator

import React, {
    Component
} from 'react'
import { View, StyleSheet, Navigator, TouchableHighlight, Text, Dimensions } from 'react-native'
const {
    width,
    height
} = Dimensions.get('window');

import Routes from './routesConfig.js';

export default class UINavigator extends Component {
    _routesLen = Number(Routes.length - 1); //索引从0 开始,路由的长度

    render() {
            const routes = Routes;
            return(
                <Navigator
            initialRoute={routes[0]}//默认第一个索引,可以认为是首页
            initialRouteStack = {routes}//栈
            renderScene={(route,navigator) =>
                <route.component route={route} navigator={navigator} routes={routes}/>
            }
            style = {
                styles.navigator
            }
            configureScene = {
                (route) => {
                    if(route.index) {
                        return Navigator.SceneConfigs.PushFromRight;

                        /*
                            configureScene这个属性是用来配置页面跳转动画和手势的,常用的动画手势如下 
                            - Navigator.SceneConfigs.PushFromRight (default) 
                            - Navigator.SceneConfigs.FloatFromRight 
                            - Navigator.SceneConfigs.FloatFromLeft 
                            - Navigator.SceneConfigs.FloatFromBottom 
                            - Navigator.SceneConfigs.FloatFromBottomAndroid 
                            - Navigator.SceneConfigs.FadeAndroid 
                            - Navigator.SceneConfigs.HorizontalSwipeJump 
                            - Navigator.SceneConfigs.HorizontalSwipeJumpFromRight 
                            - Navigator.SceneConfigs.VerticalUpSwipeJump 
                            - Navigator.SceneConfigs.VerticalDownSwipeJump
                        */
                    }
                }
            }
            navigationBar = {
                    <Navigator.NavigationBar
                routeMapper={{//导航栏路由映射器, 设置左键LeftButton, 右键RightButton, 标题Title.
                    // 左键
                    LeftButton: (route, navigator, index, navState) =>
                    { 
                        if(route.index === 0) {
                            return null;
                        }else {
                            return(
                                <TouchableHighlight onPress={() => {
                                        navigator.jumpBack() //不能是当前栈里面的第一个页面
                                    }}>
                                    <Text style={[styles.titleBar,{left:0}]} >返回</Text>
                                </TouchableHighlight>
                            )
                        }
                    },
                    // 右键
                    RightButton: (route, navigator, index, navState) =>
                    { 
                        if(route.index === this._routesLen) {//
                            return null;
                        }else {
                            return(
                                <TouchableHighlight onPress={() => {
                                    let routes = navigator.getCurrentRoutes()
                                    if (routes.length < 1) {
                                        return;
                                    }
                                    if (routes.pop().index !== route.index) {
                                        navigator.jumpForward() //不能是当前栈里面的最后一个页面
                                    }
                                }}>
                                <Text style={[styles.titleBar,{right:0}]} >下一步</Text>
                                </TouchableHighlight>)
                        }
                    },
                    Title: (route, navigator, index, navState) =>
                    { return (<Text style={styles.TitleCont}>{route.message}</Text>); },
                }}
                style={styles.titleBarBg}
                />
            }
        >
        </Navigator>

        )
    }
}

const styles = StyleSheet.create({
    navigator:{
        width:width,
        height:height,
        backgroundColor:'#999999',
        paddingTop:55,
        flex:1,
    },
    titleBarBg:{
        backgroundColor: '#008dfd',
    },
    TitleCont:{
        fontSize:18,
        color:'#FFFFFF',
        alignItems:"center",
        width:210,
        marginTop:16,
        textAlign: 'center',
        justifyContent:"center",

    },
    titleBar:{
        fontSize:14,
        color:'#ffffff',
        position:"relative",
        top:16,
        width:54,
        height:55,
        paddingLeft:5
    }
})

2、routesConfig.js文件

这个文件主要是用于配置路由组件

import Home from '../views/home'
import App from '../views/stockInfo'
import NetWork404 from '../views/404';
import DemoAnimated from '../views/demo/DemoAnimated.js';

export default Routes = [{
    message: '我的首页',//title
    index: 0,//索引
    component: Home//组件
}, {
    message: '新闻、财务、关于',
    index: 1,
    component: App
}, {
    message: '我的旋转动画',
    index: 2,
    component: DemoAnimated
}, {
    message: '404页面',
    index: 3,
    component: NetWork404
}];

使用

使用就很简单了,例如:

跳转下一页: navigator.push 方法

返回上一页,调用: navigator.pop() 方法, 使用当前页面出栈, 显示上一个栈内页面.例如:

返回第一页,调用: navigator.popToTop()方法


示例代码:


class Page1 extends Component {
    render () {
        return(
            <View style={{backgroundColor:'blue',flex:1}}>
                //跳转到下一页面
                <TouchableHighlight 
                    onPress={() => {
                        this.props.navigator.push(this.props.routes[this.props.route.index+1])
                    }
                    }>
                <Text style={[styles.text,{fontSize:15}]}>第一页</Text>
                </TouchableHighlight>
                <Text style={[styles.text,{fontSize:15}]}>页面显示的内容:这是第一页</Text>
            </View>
        )
    }
}

class ThirdPage extends Component {
    render () {
        return(
            <View style={{backgroundColor:'cornsilk',flex:1}}>

                <TouchableHighlight 
                    onPress={() => {
                        this.props.navigator.pop()//关键代码,返回到上一页
                        }
                    }>
                <Text style={[styles.text,{fontSize:15}]}>第三页pop</Text>
                </TouchableHighlight>


                <TouchableHighlight 
                    onPress={() => {
                        this.props.navigator.popToTop()//返回到第一页,也就是首页
                        }
                    }>
                <Text style={[styles.text,{fontSize:15}]}>返回第一页</Text>
                </TouchableHighlight>
            </View>
        )
    }
}

PS:pop()、 push()jumpBack()、 jumpForward() 的区别:

1、pop()、 push()一组的跳转会改变路由栈 。

2、jumpBack()、 jumpForward()不会改变。

OK,可以了!

2017-10-19 22:43:17 kangguang 阅读数 989
  • APP渗透测试之代理篇

    本课程就APP渗透测试中的服务端测试进行讲解,课程中讲解如何使用夜神模拟器,如何抓取app中的http协议流量及HTTPS协议流量。结合web服务端测试,通过抓取的流量进行修改来完成服务端渗透测试。

    48 人正在学习 去看看 铭智

复用学习移植项目的项目(此时版本0.49)

这时候 import CustomerComponents, {Navigator} from 'react-native-deprecated-custom-components';已经失效,运行报错

此时对项目进行更改


NavigatorIOS, 学习参考http://www.jianshu.com/p/4c81995746ea


二、增加TabBar

  1.创建more.js

  


2.修改 app.js




三、运行项目


四。访问原生API

1.新建Platform.js

2.修改more.js

 

3.XCode 上创建 Platform文件

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface Platform : NSObject<RCTBridgeModule>

@end

#import "Platform.h"

@implementation Platform
RCT_EXPORT_MODULE();
-(NSDictionary *)constantsToExport
{
  return @{@"systemName":@"ios"};
}
@end


5.运行


更多学习 http://www.cnblogs.com/shaoting/p/6392390.html

源码地址:https://github.com/kangxg/React-Native-    RNTransplant目录

React Native 注释问题

阅读数 3012

java native方法使用

阅读数 3437

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