2018-12-08 16:23:09 qq_35134066 阅读数 1311
  • React Native初级入门项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    41165 人正在学习 去看看 易荟云

导入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标签所在位置.

2018-11-05 18:52:33 qq_34983989 阅读数 1537
  • React Native初级入门项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    41165 人正在学习 去看看 易荟云

最近需要预研一下 将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

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

2019-11-07 15:05:21 weixin_39946536 阅读数 25
  • React Native初级入门项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    41165 人正在学习 去看看 易荟云

写react中时总会跟vue对比,vue中有keep-alive做缓存页面,也有相应的api激活(activated)和停用(deactivated)。
react中我们用react-router-dom做路由时怎么缓存页面呢?

我想的是在Route中一个exact属性,当exact为false时下
< Route path="/login" component={A} />
< Route exact path="/login/:id" component={B} />
如果进入B页面时A页面也会显示,只要我页面在B页面时隐藏A页面,在返回A页面时在显示就可以了
重点就在componentWillReceiveProps函数中进行显示隐藏
import * as React from ‘react’;
import{ Route } from ‘react-router-dom’;

interface RoutesProps {
component:any,
path:any,
[random:string]:any
}

interface RoutesState {
[random: string]: any;
}
export default class Routes extends React.PureComponent<RoutesProps,RoutesState>{
constructor(props:any) {
super(props);
this.state={
isShow:true
}
}

componentWillReceiveProps(){
if(this.props.path == window.location.pathname){//对比路由
let myClass = this.props.component.WrappedComponent
let fun = new myClass(React)//获取模块
fun && fun.returnQuery && fun.returnQuery()//激活模块中查询函数(returnQuery可以自己命名)
this.setState({isShow:true})
}else{
this.setState({isShow:false})
}
}

render(){
return < div style={{display:this.state.isShow?‘block’:‘none’}}>
< Route {…this.props} />
</ div>

}
}
你的模块有使用react-redux可以直接使用复制使用,
没有的话就在componentWillReceiveProps中就去除WrappedComponent
componentWillReceiveProps(){
if(this.props.path == window.location.pathname){//对比路由
let myClass = this.props.component
let fun = new myClass(React)//获取模块
fun && fun.returnQuery && fun.returnQuery()//激活模块中查询函数(returnQuery可以自己命名)
this.setState({isShow:true})
}else{
this.setState({isShow:false})
}
}
这样就可以了

2019-09-23 16:29:06 kongcheng_001 阅读数 661
  • React Native初级入门项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    41165 人正在学习 去看看 易荟云

React 页面中插入图片

React 页面中设置背景图

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

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

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

2018-11-28 14:47:22 qq_27628011 阅读数 5432
  • React Native初级入门项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    41165 人正在学习 去看看 易荟云

react route 页面跳转参数传递(4.0版本)

React页面跳转传递参数,react打开新页面传递参数我将通过下面代码来说明。

首先两者传递参数方式区别不大,我将通过react Link标签来为大家说明,废话不多说,上代码

下面代码块是父级页Link代码示例,此时传递的数据存放在RouteComponentProps.history.location中,所以页面需要继承RouteComponentProps,我采用的是4.0版本的

<Link
    // 弹出新的选项卡只能用search来传递数据,单页面的话可以使用state
    // 注意,此处search传递是以URL拼接的方式传递传递长度根据浏览器限制来的,只能传递字符串,
    // 还有search传递过去的参数会默认追加一个? e.g search?id=1
    // state则没有限制,可直接传递obj
    to={{ pathname: "/maker/bill/detail/supplement", search: JSON.stringify(billDetailObj) }}
    target="_blank"
    // 当target="_blank"打开新页面的时候,state内容无法传递
    state:{id:1}
    className="fontBlue fontWeight">
     打开新页面
</Link>

子级页面接收:

刚已经说了,用到路由传递参数的需要继承RouteComponentProps,所以子级页面要记得继承,不然哪里去拿history.location对吧,下面上代码,需要注意的是记得构造函数初始化一下自己定义的参数,因为我用ts,所以做了强类型

// 页面初始化加载
  public componentDidMount() {
    console.log("新打开窗口,下面是传递过来的参数");
    debugger
    // 从ocation中取出search
    let search = this.props.history.location.search
    // TODO 调试完毕以后需要在这里增加判断,如果该参数为空则非正常途径进入需要跳转到账单主页
    // 这里是因为默认前面有一个?,切掉
    search = search.substr(1,search.length);
    // 因为传递的有中文,所以此处需要decodeURI进行URL解码
    const searchObj:BillDetail = JSON.parse(decodeURI(search));
    console.log(searchObj);
    // 将处理完毕的数据更新至state,并渲染到页面
    this.setState({
      billdDetail:searchObj
    })
  }

 

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