2017-11-06 15:27:11 anLA_ 阅读数 3091
  • 完全征服React Native

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

    57803 人正在学习 去看看 李宁

上两个礼拜在学习Python和React,完成了一个demo,前端使用React+Redux实现,参考并借鉴了网上代码,后端采用Python的Flask框架,在数据存储方面,简单的利用了Redis进行缓存。
项目包括以下几块内容:

  • 登录功能,不允许重复用户名密码
  • 对在线人数进行过滤搜索
  • 每5s更新一次在线聊天人数
  • 登录时获取近一段时间的聊天室聊天数据
  • 聊天数据以localStorage存在本地,再次刷新数据不会丢失

技术栈:

  • Python Flask作为后端代码实现
  • Redis作为数据存储
  • 基于React+Redux前端框架作为实现

下面是效果图:

这里写图片描述

下面是前端的代码结构:

这里写图片描述

Python端代码结构:

这里写图片描述

有需要的同学可以从我的github上clone:
Python_Websocket_flask_chat

运行本项目

安装Node.js

安装Nodejs:

sudo apt-get install nodejs

安装npm:

sudo apt-get install npm

配置cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

安装Python

安装python:

sudo apt-get install python2.7 python2.7-dev

安装pip:

sudo apt-get install python-pip

安装Redis

下载redis:

wget http://download.redis.io/releases/redis-4.0.2.tar.gz
tar xzf redis-4.0.2.tar.gz
cd redis-4.0.2
make

###运行前端代码
进入**/Python_Websocket_flask_chat/app/static**
分别执行:

npm install

运行开发环境:

npm run dev

接着访问:http://localhost:8085/
即可看到主页。

运行Redis

进入Redis根目录
执行:

./redis-server

运行python服务器

下载所需依赖:

pip install -r /Python_Websocket_flask_chat/requirements/requirements.txt

运行服务器:

python /Python_Websocket_flask_chat/manage.py

觉得博主写的有用,不妨关注博主公众号: 六点A君。
在这里插入图片描述

2018-12-08 16:23:09 qq_35134066 阅读数 1316
  • 完全征服React Native

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

    57803 人正在学习 去看看 李宁

导入react-router-dom模块

import { Route,Link, NavLink } from 'react-router-dom'

react页面跳转最简单的就是Link标签或者NavLink标签实现a标签的跳转,路径写在to属性里面

例如

<NavLink to='/home' activeClassName='active'>
     span>首页</span>
</NavLink>
<Link to='/home'>
     span>首页</span>
</Link>

<Route path="/home" component={Home}></Route>

然后在需要显示页面的地方添加Route标签即可.

 

然后就是手动控制跳转:

this.props.history.push('/home')

这个也会跳转到Route标签所在位置.

2019-09-23 16:29:06 kongcheng_001 阅读数 676
  • 完全征服React Native

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

    57803 人正在学习 去看看 李宁

React 页面中插入图片

React 页面中设置背景图

网上看好多都不能用,正确的做法:

backgroundImage: "url(" + require("../imgs/bg_pc.jpg") + ")"

只要是在页面中,直接加载图片资源都要使用 require

2018-11-05 18:52:33 qq_34983989 阅读数 1541
  • 完全征服React Native

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

    57803 人正在学习 去看看 李宁

最近需要预研一下 将React 代码打个aar包供给android 项目使用,由于牵扯到页面跳转,所以首先得实现Android原生页面即Activity 跳转到React的 js页面。 这里简单的记一下

一,Activity跳转到React 页面

  1. 创建一个react native 项目,这个很简单
  2. 用android studio在对应的android 中创建一个类LaunchActivity,作为我们项目的启动页,别忘了在Manifest.xml中进行配置
<activity android:name=".LaunchActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
  1. 在LaunchActivity中随便添加一个click事件,让点击跳转到我们的MainActivity页面
button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(LaunchActivity.this, MainActivity.class);
                startActivity(intent);
            }
        });
  1. 在我们的MainActivity中
public class MainActivity extends ReactActivity {
    public MainActivity() {
    }

    protected String getMainComponentName() {
        return "NativeJumpToRN";   //  和我们的 package.json 中的name 项目名称保持一致
    }
}

现在 运行程序 react-native run-android 就可从原生页面跳转到React页面了
如果是APK 安装运行,那么就要到main 目录下创建一个assets文件夹,然后将react代码打包成bundle文件拷贝到此文件夹中,要不然会报找不到资源的错误。

二,React跳转到Activity页面

React 页面跳转到Activity页面主要还是React 和原生进行通信,然后原生进行Intent跳转

  1. 创建对应的Module和Package
public class OpenNativeModule extends ReactContextBaseJavaModule {
    private ReactContext mReactContext;

    public OpenNativeModule(ReactApplicationContext context) {
        super(context);
        this.mReactContext = context;
    }

    @Override
    public String getName() {
        return "OpenNativeModule";
    }

    @ReactMethod
    public void openNativeVC() {
        Intent intent = new Intent();
        intent.setClass(mReactContext, TestActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        mReactContext.startActivity(intent);
    }
}
public class OpenNativePackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new OpenNativeModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

其中 openNativeVC 方法就是具体的跳转方法,我们可以看到里面用了Intent进行跳转

注意

  • @ReactMethod 这个不能忘,要不然调用不会起作用的
  • OpenNativePackage 需要到MainApplication中进行注册
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new OpenNativePackage()
      );
    }
  1. 在我们的JS 中写对应的调用方法就可以了
      <Button
          title={'跳转到原生页面'}
          onPress={() => {
            this.jumpToNativeView();
          }}
          />
jumpToNativeView() {
    nativeModule.openNativeVC();
  }

这样就可以从React页面跳转到原生Activity页面了

关于前面说到的打aar包,先要将整个js 文件打包成bundle文件,拷贝到modle的assets目录下,再进行编译即可。
modle 目录示意图

效果图
在这里插入图片描述
具体事例可以参考NativeJumpToRN

如有疑问,请提出共同讨论学习。

2020-01-14 19:06:53 qq_43412333 阅读数 136
  • 完全征服React Native

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

    57803 人正在学习 去看看 李宁

简述:

第一个页面  ReactDom.render(<div>我的第一个react页面</div>,document.getElementById("root"));中的

<div>我的第一个react页面</div>,document.getElementById("root")

本质上是一个函数,可以有参数,返回值,可以调用,存在多种写法

1 拆分代码如下 普通的声明函数  结果跟之前一样

2 函数的参数使用 

 3 将函数变成组件的方式调用

 

 

 每写完一个方法,记得保存,运行npm run serve既可以看到对应的结果

 

 

react缓存页面

阅读数 28

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