2018-05-06 16:58:22 qq_41915690 阅读数 3646
  • 完全征服React Native

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

    57798 人正在学习 去看看 李宁

使用navigation时需要在项目中输入npm install --save react-navigation或者yarn add react-navigation

如图:注意是在项目内的控制台输入。输入后才能正确只能提醒并使用(如果已经安装yarn,建议使用yarn add react-navigation   因为这个速度快)

注:使用前必须import引入!

import {
    StackNavigator
}from 'react-navigation';

 

------------------------------------分割线----------------------------------------------

 

使用StackNavigator时设置页面的标题

代码如下:

 static navigationOptions = {    //上标题
        title: '页面一',
    };

 

----------------------------------分割线---------------------------------

接下来来一个精简版的实例,能直接运行。

// App.js
import React, {Component} from 'react';
import ChoosePage from './src/choosePage';

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <ChoosePage/>

        );
    }
}
// choosePage.js
import React, {Component} from 'react';
import page1 from './page1';
import page2 from './page2';
import {
    StackNavigator
} from 'react-navigation';

export default class choosePage extends Component {

    render() {
        return (
            <MyNavigator/>
        );
    }
}
const MyNavigator = StackNavigator({
    p1: {screen: page1},
    p2: {screen: page2},
}, {
    initialRouteName: 'p1',
});
// page1.js
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity
} from 'react-native';

export default class page1 extends Component<Props> {
    static navigationOptions = {    //上标题
        title: '第一页',
    };

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
                <TouchableOpacity
                    onPress={() => {
                        navigate('p2');
                    }}>
                    <Text>点我去第二页!</Text>
                </TouchableOpacity>


            </View>
        );
    }
}
// page2.js
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity
} from 'react-native';

export default class page2 extends Component<Props> {
    static navigationOptions = {    //上标题
        title: '第二页',
    };

    render() {
        return (
            <View>
                <Text>欢迎来到第二页!</Text>
                <TouchableOpacity onPress={() => {
                    this.props.navigation.goBack()
                }}
                >
                    <Text>
                        点我返回
                    </Text>
                </TouchableOpacity>
            </View>

        );
    }
}

效果图

一个跳转页面完成了!

 

附:

规范化文件布局:https://blog.csdn.net/qq_41915690/article/details/80216039

运行项目简易方法:https://blog.csdn.net/qq_41915690/article/details/80155372

初次运行项目会遇到的问题解决方法:https://blog.csdn.net/qq_41915690/article/details/80289475

跨界面数据传输功能源代码:https://blog.csdn.net/qq_41915690/article/details/80294473

 

2017-09-07 10:33:46 u011094768 阅读数 1843
  • 完全征服React Native

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

    57798 人正在学习 去看看 李宁

react-native react-native-swiper 设置horizontal=false后界面依然横向滑动,
主要是对布局进行了旋转操作

export  default class TestSwiper extends Component {
    render(){
        return (
            <View style={styles.containerStyle}>
                <Swiper
                    showsPagination={false}
                    autoplay
                >
                    <Text style={[{backgroundColor:"#f0f"},styles.pageStyle]}>界面1</Text>
                    <Text style={[{backgroundColor:"#ff0"},styles.pageStyle]}>界面2</Text>
                    <Text style={[{backgroundColor:"#00f"},styles.pageStyle]}>界面3</Text>
                </Swiper>
            </View>
        )
    }
}
const styles=StyleSheet.create({
    containerStyle:{
        backgroundColor:"#000",
        //旋转90度
        transform:[{rotate: "90deg"}],
        height:100,
        width:100,
    },
    pageStyle:{
        height:100,
        width:100,
        //旋转-90度
        transform:[{rotate: "-90deg"}]
    }
})

这里写图片描述

2019-02-23 16:49:37 baidu_39503346 阅读数 181
  • 完全征服React Native

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

    57798 人正在学习 去看看 李宁

React Native是React在移动端的跨平台方案 ,开启了开发原生App的新方式。学习React Native需要熟悉React。

React Native是基于React设计的。其官网的介绍是使用React构建Native应用框架,它采用的语法也是React。

需要安装软件

Node.js和npm、React Native(react-native-cli)、NVM(Node.js Version Manager,来管理Node.js版本) 

创建项目:

react-native init "project name"

React:提出的是一个新的开发模式和理念,他强调的是“用户界面”。

React三个特点

作为UI(Just the UI):React可以只作为视图(View)在MVC中使用。

虚拟DOM(Virtual DOM):可以很好的优化视图的渲染和刷新,它是React的一个亮点,也是重要的一个特性。、

数据流(Data Flow):React实现了单向的数据流,并且在数据绑定上更加灵活、便捷。

React学习需要的知识

JSX语法知识:JSX的官方解释是其语法类似于XML,而HTML是XML的子集。

ES6相关知识:因为ES6增加了很多语法特性和新功能,使用它可以进行快速的功能开发。

前端基础知识:最基础的要求需要具备基本的前端知识,CSS和JavaScript比较重要。

React Native开发流程

设计阶段:1、需求分析;2、组件规划

开发阶段:1、入口组件;2、功能入口组件;3、功能集合[n](n:可有多个)

打包更新机制:1、代码更新:a、本地存储,b、远程拉取,c、版本管理;2、自动打包

React Native引进原因

为了将开发成本和用户体验做到平衡。它的跨平台特性和使用JavaScript作为开发语言广受欢迎。它不仅可以使用前端开发模式来开发应用,还能调用原生的UI组件和API。它兼顾了开发效率,提高了用户体验。

React Native学习地址

React Native官网:http://facebook.github.io/react-native/

React Native版本发布:http://github.com/facebook/react-native/releases

React Native Github地址:http://github.com/facebook/react-native

疑难问题搜索:https://github.com/facebook/react-native/issues

 

2020-01-09 12:25:40 weixin_38824257 阅读数 2195
  • 完全征服React Native

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

    57798 人正在学习 去看看 李宁

React-Native集成到现有的安卓项目请移步:

链接: https://blog.csdn.net/major_zhang/article/details/84645352

1.创建react-native项目

因为react-native更新得很快,使用react-native init命令创建项目会默认使用最新的react-native版本,这也导致了与之前一些api的不兼容。
我们可以使用下面的命令指定使用的react-native版本:

 react-native init demo --verbose --version 0.57.7

2.原生页面跳转到react-native页面

使用android studio导入项目下的android子目录。由于使用命令react-native run-android默认会启动MainActivity作为第一个页面并且现在MainActivity会默认加载react-native页面,这里我们是想从MainActivity跳转到react-native页面。所以要改写一下MainActivity:
在MainActivity中添加两个按钮,一个跳转到react-native的主页面,另一个跳转到react-native的子页面。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_rn);


        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(MainActivity.this,RNActivity.class));
            }
        });

        findViewById(R.id.btn_test).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(MainActivity.this,TestActivity.class));
            }
        });
    }
}

然后我们创建RNActivity用于承载react-native的主页面,注意在getMainComponentName方法中返回的字符串就是在react-native中注册的组件名字。

public class RNActivity 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 "application";
    }
}

在react-native注册的组件定义如下:AppRegistry.registerComponent方法的第一个参数是组件的名字,第二个参数是需要显示的组件。这里第二个参数我们使用了导航组件react-navigator来显示。

项目的index.js

import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';
import {AppStackNavigator} from "./src/navigator/AppNavigator"

AppRegistry.registerComponent('application', () => AppStackNavigator);

然后使用命令react-native run-android将项目运行起来。
在这里插入图片描述

3.react-native页面跳转到原生页面

需要从react-native页面跳转到原生页面步实现方法是这样的:首先,在原生中创建一个继承ReactContextBaseJavaModule的类,重写getName方法并且添加一个供react-native调用的方法,该方法就是用于页面跳转。然后,创建一个继承ReactPackage的类,将继承于ReactContextBaseJavaModule的类的实列添加进去。最后,在MainApplication的getPackages方法中,添加继承于ReactPackage的类的实例。
代码如下:

MyIntentModule

package com.demo;

import android.app.Activity;
import android.content.Intent;
import android.text.TextUtils;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyIntentModule extends ReactContextBaseJavaModule {
    public MyIntentModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "IntentMoudle";//这里定义的是该模块名字
    }
   

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

    @ReactMethod
    public void dataToJS(Callback successBack, Callback errorBack){
        try{
            Activity currentActivity = getCurrentActivity();
            String result = currentActivity.getIntent().getStringExtra("data");
            if (TextUtils.isEmpty(result)){
                result = "没有数据";
            }
            successBack.invoke(result);
        }catch (Exception e){
            errorBack.invoke(e.getMessage());
        }
    }
}

MyReactPackage

package com.demo;


import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new MyIntentModule(reactContext));
    }
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

MainApplication 
```java

package com.demo;

import android.app.Application;

import com.facebook.react.ReactApplication;
import org.devio.rn.splashscreen.SplashScreenReactPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

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 SplashScreenReactPackage(),
              new MyReactPackage()//将MyReactPackage实例添加进来
      );
    }

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

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

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

在react-native中调用,这个界面我写的示例比较多。其实使用起来很简单,先引入NativeModules,添加一个按钮,点击调用jumpNative方法。在方法中调用在原生定义的方法:NativeModules.IntentMoudle.startActivityFromJS(“MainActivity”, null);

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

import React, {Component} from 'react';
import {
    AsyncStorage,
    StyleSheet,
    Image,
    View,
    Text,
    TouchableOpacity,
    ActivityIndicator,
    DrawerLayoutAndroid,
    NativeModules,//引入的模块

} from 'react-native';



export default class Home extends Component {


    jumpNative(){
        //调用原生方法
        NativeModules.IntentMoudle.startActivityFromJS("MainActivity", null);
    }

    render() {
        const {navigation} = this.props;

        return (
            <View>
                <View style={styles.container}>

                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('TestPage');
                                      }}>
                        <Text style={styles.bt_text}>
                            注册的子页面
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          this.jumpNative();
                                      }}>
                        <Text style={styles.bt_text}>
                            跳转到原生页面
                        </Text>
                    </TouchableOpacity>


                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('Page1', {name: '动态的title'});
                                      }}>
                        <Text style={styles.bt_text}>
                            页面跳转
                        </Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('FlatListPage');
                                      }}>
                        <Text style={styles.bt_text}>
                            列表页面
                        </Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('KeyboardAvoidingViewPage');
                                      }}>
                        <Text style={styles.bt_text}>
                            键盘弹起自动伸缩
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('SomeComponent');
                                      }}>
                        <Text style={styles.bt_text}>
                            一些组件
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('TextPage');
                                      }}>
                        <Text style={styles.bt_text}>
                            文本标签
                        </Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('TouchablePage');
                                      }}>
                        <Text style={styles.bt_text}>
                            Touchable
                        </Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('HookPage');
                                      }}>
                        <Text style={styles.bt_text}>
                            生命周期
                        </Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('PlaceAnOrder');
                                      }}>
                        <Text style={styles.bt_text}>
                            包车物流
                        </Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.bt} activeOpacity={0.5}
                                      onPress={() => {
                                          navigation.navigate('Component11');
                                      }}>
                        <Text style={styles.bt_text}>
                            时间选择器
                        </Text>
                    </TouchableOpacity>

                    <ActivityIndicator size="large" color="#0000ff"/>

                    <View style={styles.container}>
                        <Image
                            style={{width: 180, height: 180}}
                            source={{uri: 'http://wx4.sinaimg.cn/bmiddle/78b88159gy1g8ryut3tdrg208l08lkgn.gif'}}
                        />
                        <Image
                            style={{width: 180, height: 180}}
                            source={{uri: 'http://wx3.sinaimg.cn/bmiddle/006GJQvhly1g7qk0w0kyrg307e07e1hs.gif'}}
                        />
                    </View>
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    bt: {
        width: 180,
        height: 50,
        backgroundColor: '#0af',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        marginLeft: 5,
        marginTop: 5,
    },
    bt_text: {
        color: '#fff',
    }
});


然后使用命令react-native run-android将项目运行起来。
在这里插入图片描述
完整的项目demo:

https://github.com/githubchl/ReactNativeDemo

注意,运行项目前。先npm install下载好项目依赖。然后打开android studio导入android目录下载好依赖,再使用react-native run-android运行项目。如果这篇博客确实帮助到你了,麻烦到github点个star。

2019-02-20 12:01:48 cfhgcvb 阅读数 54
  • 完全征服React Native

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

    57798 人正在学习 去看看 李宁
                     

初步感官

和身边的朋友讨论过这个框架,昨晚好奇下载reactJS 早上一看还有个react-native 忽然感觉到小白了。react-native 构建的基础原来是reactJS 这家伙。
至于好不好,打鸡血也好,激动也好,第三方框架都是存在风险,一旦苹果和android 平台锁死这个开关,第三方框架还是要死路一条。但在构建这个的时候,确实有一些让人感觉新奇的地方-过去H5一直旧病就是性能低下,webView 坑了不少群众,而react-native 似乎改变了一下做法,玩起了原生调用。其实相当于映射一层关系。但实际是如何运作,还是一头雾水。为什么web 发展到现在就只有fb尝试改造过?我还是不敢下定论。js 统治世界的目标又迈进了一步。

第三方框架有好也有不错,一是调试方便,易于更新和维护。要知道苹果审核慢是出名的。只有发明这些转空子的做法去实现。布局框架难用?目前苹果已经开始逐步改善,所以到后期这些框架存在也变得意义不大。一旦停止更新的后果?第三方一旦停止更新带来一些影响。风险权重要衡量。
优点也讲到,跨平台。减少人力成本,易于维护和调试更新react-native  改进调试方面,却是一大进步,我相信今后编程也会朝向这个目标设计。

react-native init 第一次创建也是参考下面的文章,提及到很多信息了。所以参考这两篇就好了。

但唯一不足是 react-native init 这个命令创建真是慢。从老远程下载回来。第一次会很慢,第二次后面相对会快一些。至于为什么,当然是万恶的网络了。

创建的问题

第一个程序创建失败的时候,可以参考如下流程。
在自己的项目里面 

使用 react-native init 命令创建一个名为 myProject  的文件夹,如果重复创建会提示。

当遇到创建失败的情况。 react-native init fail 的情况,
可以使用如下方法,操作如下,进入到myProject 文件夹,在终端敲打 react-native –save 命令,完成后,再一次使用 react-native init myProject 命令。选择覆盖。这样是会会可以出现项目了。

As a temporary fix,

react-native init myProject
cd myProject && npm install react-native –save
cd ..
react-native init myProject
say yes to overwrite the project.

参考一个博客案例来学习写一下,体验的效果非常好,关键是调试的时候,能够快速刷新这个机制确实是很好解决调试UI的问题。但是基于Es6的语法支持类的书写,多少能够封装起来使用非常方便。

这里写图片描述

参考资料

《深入浅出 React Native:使用 JavaScript 构建原生应用》
http://zhuanlan.zhihu.com/FrontendMagazine/19996445

《React Native第一课》
http://html-js.com/article/2783

《react-native init 》
http://github.com.proxy.parle.co/facebook/react-native/issues/3342

《深入浅出ES6(一):ES6是什么》
http://www.infoq.com/cn/articles/es6-in-depth-an-introduction

           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

React Native入门

阅读数 39

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