wuba / taro-react-native Goto Github PK

This project forked from nervjs/taro

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。 https://taro.jd.com/

License: MIT License

JavaScript 38.89% HTML 0.74% CSS 0.38% TypeScript 59.28% Vue 0.03% SCSS 0.65% Less 0.01% Sass 0.01% Stylus 0.01% Shell 0.01%

taro-react-native's Introduction

Taro

开放式跨端跨框架解决方案，轻松构建可以运行在小程序/Web/APP 上的应用

GitHub commits since latest release (by date)

简体中文 | English

简介

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要

版本迁移

Taro 1/2 迁移至 Taro 3，请阅读《Taro 版本升级权威指南》

学习资源

5 分钟上手 Taro 开发

awesome-taro

掘金小册：Taro 多端开发实现原理与实战

社区共享

Taro 物料市场——让每一个轮子产生价值

UI 库

名称	地址	介绍	支持的框架	支持的 Taro 版本
taro-ui	https://taro-ui.jd.com/#/	一套基于 Taro 框架开发的多端 UI 组件库	React	Taro 1/2/3 （Taro 3 需要安装 alpha 版本）
NutUI	https://nutui.jd.com/#/	京东风格的轻量级移动端 Vue 组件库	Vue3	Taro 3
taroify	https://taroify.gitee.io/taroify.com/introduce/	轻量、可靠的小程序端 Taro 组件库（Vant 的 Taro 版本）	React	Taro 3
@antmjs/vantui	https://antmjs.github.io/vantui/#/home	基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库	React	Taro 3
Tard	https://tard-ui.selling.cn/	一套基于Taro框架开发的多端React UI组件库	React	Taro 3

使用案例

Taro 已经投入了我们的生产环境中使用，业界也在广泛地使用 Taro 开发多端应用。

征集更多优秀案例

特性介绍

跨框架支持

React/Nerv 支持

在 Taro 3 中可以使用完整的 React/Nerv 开发体验，具体请参考基础教程——React

代码示例

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World！ '
  }
  
  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

Vue 支持

在 Taro 3 中可以使用完整的 Vue 开发体验，具体请参考基础教程——Vue

代码示例

<template>
  <view class="index">
    <text>{{msg}}</text>
  </view>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  },
  created () {},
  onShow () {},
  onHide () {}
}
</script>

多端转换支持

Taro 方案的初心就是为了打造一个多端开发的解决方案。

目前 Taro 3 可以支持转换到微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等端。

加入共建

加入 Taro 社区共建倡议

Taro 邀你加入社区共建

为 Taro 贡献代码

Taro 非常欢迎社区开发者为 Taro 贡献代码，在贡献之前请先阅读贡献指南。

如果你想为 Taro 实现一个重要功能，需要先撰写 RFC 文档，按照 Taro 的RFC 机制进行操作，在经过社区讨论完善后才可以进行代码的提交。

问题反馈与建议

给 Taro 提 ISSUE

特别鸣谢


nanjingboy	jsNewbee	Qiyu8	Garfield Lee

贡献者们

开发计划

Milestones

更新日志

本项目遵从 Angular Style Commit Message Conventions，更新日志请查阅 Release。

开发交流

官方交流微信群

License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

taro-react-native's People

Contributors

Stargazers

Watchers

Forkers

qiuziz jerryhjy blackyhawk chili-kwh liyumingben sunday647 lukehuang stantoxt hviwen zgw88 enterpriseih flyrui316

taro-react-native's Issues

直播组件和接口支持

问题描述

https://taro-docs.jd.com/taro/docs/apis/media/live/createLivePusherContext
https://taro-docs.jd.com/taro/docs/apis/media/live/createLivePlayerContext

解决方案

tabBar.list中的iconPath和selectedIconPath期望支持本地图片

需求描述

tabBar.list中的iconPath和selectedIconPath，目前还只支持传入网络地址，期望支持本地图片（来自“Taro RN核心交流群”）

提供原生SDK，作为小程序引擎

问题描述

原生APP，通过集成该SDK，即可运行 Taro 开发的小程序。

解决方案

Video组件onPlay事件重复触发

问题描述

Video组件，onPlay事件会在播放时重复触发

期望

onPlay事件仅在播放开始时触发一次（对比微信小程序）

复现代码

<Video
  src='https://f.video.weibocdn.com/Y6kGr4x5lx07KVKOn68w010412005o0b0E010.mp4?label=mp4_ld&template=360x640.24.0&trans_finger=81b11b8c5ffb62d33ceb3244bdd17e7b&ori=0&ps=1BVp4ysnknHVZu&Expires=1615200805&ssig=ABkh9gnMX9&KID=unistore,video'
  poster="https://tukuimg.bdstatic.com/processed/59dfed09b5efe57cdc0f3b7c4d2b2d2f.jpeg@s_0,w_660,h_370,q_80,f_webp"
  onPlay={this.onPlay}
  objectFit='contain'
  id='video'
/>

支持动画接口

问题描述

解决方案

封装 RN 的 animated
给page 添加 animate 接口

Video组件设置autoplay、loop属性问题

问题描述

Video组件设置autoplay=false, loop=true，视频播放结束后不会自动循环播放

期望

autoplay=false, loop=true时，视频播放结束后应该会自动循环播放

复现代码

<Video
  src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
  controls={true}
  autoplay={false}
  id='video'
  loop={true}
/>

提供打包自动化方案

问题描述

用户在使用 Taro 开发 APP 时，经常会配到各类环境问题，且难以解决，开发人员也难以提供帮助。

解决方案

罗盘相关接口支持

问题描述

解决方案

metro 相关 lib 升级至 0.64

问题描述

metro 相关依赖，目前落后主版本较多

解决方案

升级至较新的版本

注意与各个版本之间的兼容情况。0.57，0.63，0.64

CustomWrapper 组件支持

问题描述

error: Error: Unable to resolve module `@tarojs/components-rn/dist/components/CustomWrapper` from `src/taro-ui/components/grid/index.js`: @tarojs/components-rn/dist/components/CustomWrapper could not be found within the project.

3.0新增的CustomWrapper，3.2可能还没有补全。这个组件在RN里，跟Block或者Fragment应该是一样作用的

解决方案

方案同 RN 里的Block。

在配置中写 navigationStyle:"custom" 似乎还不支持？

NervJS#8180 (comment)

云开发支持方案

问题描述

�解决方案

Video组件showCenterPlayBtn属性问题

问题描述

Video组件，showCenterPlayBtn为false时，视频底部的播放控件未显示

期望

showCenterPlayBtn为false时，视频底部的播放控件依旧显示（对比微信小程序）

复现代码

<Video
  src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
  controls
  showCenterPlayBtn={false}
  id='video'
/>

支持React Native 0.64 版本

问题描述

RN已发布新版本，经测试验证，目前更新到0.64后无法运行。
https://reactnative.dev/blog/2021/03/12/version-0.64

解决方案

页面跳转点击反馈明显变慢了

问题描述

页面跳转相应时间较长

解决方案

提供支付解决方案

问题描述

解决方案

提供RN微信支付、支付宝支付相关包，集成进接口。
用户通过配置，打开支付功能。

蓝牙相关接口支持

问题描述

解决方案

背景音频接口支持

问题描述

表现行为与小程序一致
相关文档:https://taro-docs.jd.com/taro/docs/apis/media/background-audio/getBackgroundAudioManager

解决方案

提供安卓版本开发者APP，并上架各应用市场

问题描述

降低新手初始化demo成本。

解决方案

打包一个壳工程，并对外发布。

Taro.getCurrentPages()没有page.options

问题描述

Taro-RN，使用 Taro.getCurrentPages() 获取当前页面实例，参数跟其他端没保持一致。能拿到 page.route ，但是拿不到page.options。
node_modules/@tarojs/taro/types/api/framework/index.d.ts里面关于Taro.Page的定义虽然没options，但是实际小程序端是有的。

期望

期望跟小程序同步，加上page.options数据

陀螺仪相关接口支持

问题描述

解决方案

分析原生依赖，进行包大小优化（Android+iOS）

问题描述

目前壳工程，会把taro rn依赖全部加上，开发者需要手动做修改，删除不需要的包。

解决方案

提供热更新方案

问题描述

小程序可以动态更新，RN APP 借助code push 之类的工具，也能够实现动态化。

解决方案

参考

ibeacon 相关接口支持

问题描述

解决方案

提供修改接口的方案

问题描述

怎么修改@tarojs/taro中的方法？例如修改 Taro.chooseImage 的逻辑。直接修改 Taro.chooseImage = XXX 不行。

解决方案

可考虑将按需加载的配置提供出来，供业务进行配置。

提供iOS版本开发者APP，并上架APP store

问题描述

降低新手初始化demo成本。

解决方案

打包一个壳工程，并对外发布。

支持 Canvas 组件及接口

问题描述

canvas 组件和接口未得到支持。

解决方案

可选，采用 https://github.com/iddan/react-native-canvas 方案。

提供canvas组件。
兼容触摸事件。
处理缩放比例。
以f2为例，提供一个跨端组件库，可参考https://github.com/xioxin/taro-f2 。
提供使用上述组件库的示例。

React Native 0.59.9 支持

问题描述

0.59.9 仍有一定使用量，希望能得到支持

解决方案

chooseLocation、openLocation 接口支持

问题描述

NervJS#8180 (comment)

支持chooseLocation、openLocation等地图相关接口，同时因为地图SDK各业务使用的不一致，提供动态化方案，可自行选择地图进行接入。

解决方案

提供动态添加接口的方案。
以百度地图为例，提供一个参考。

createSelectorQuery 接口支持

问题描述

解决方案

支持 Linaria

问题描述

3.1 版本小程序和h5 支持了Linaria，RN是否支持？支持的方式？
相关文档：https://taro-docs.jd.com/taro/blog/2021-03-10-taro-3-1-lts#3-linaria

解决方案

NFC 相关接口支持

问题描述

解决方案

CameraContext对象调用takePhoto有较大概率失败

问题描述

createCameraContext 创建的CameraContext对象，调用takePhoto有较大概率失败，严重影响用户体验

期望

调用takePhoto能成功

复现代码

try{
  this.cameraContext.takePhoto({
    quality: 'high',
    success: res => {
      const {tempImagePath} = res;
      this.setState({
        imageSrc: tempImagePath
      });
    },
    fail: res => alert('拍照失败：'+JSON.stringify(res))
  })
}catch(err){
  alert('出错：'+JSON.stringify(err))
}

提供跨端通用的 iconfont 解决方案

问题描述

NervJS#8180 (comment)

在小程序、h5中使用字体图标是比较简单的，直接下载iconfont的项目通过引用css即可，在rn端好像这样并不行，看你们提供的示例都没有带iconfont，想问下有没有能适合rn和小程序端通用的字体图标方案呢？

解决方案

Wifi 相关接口支持

问题描述

解决方案

加速计事件监听和绑定问题

解决方案

参考 https://github.com/wix/react-native-notifications

联系人相关接口支持

问题描述

解决方案

完善测试用例

问题描述

仍有较多组件及api，无测试用例覆盖

解决方案

增加测试用例覆盖

Taro.chooseImage 支持 sizeType 参数

问题描述

rn 端未支持 sizeType

参考文档：https://taro-docs.jd.com/taro/docs/apis/media/image/chooseImage

解决方案

视频API requestFullScreen调用未生效

问题描述

1、点击播放按钮，会如下报错误；

2、ios点击“进入全屏”， requestFullScreen调用无效；安卓点击全屏，视频会断断续续播放，且不会进入全屏状态；

期望

requestFullScreen可正常全屏视频；视频播放不会报错；

复现代码

import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { Video, View, Button, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  constructor(props){
    super(props)
    this.state = {
      count: 0
    }
  }

  videoContext
  count = 0

  fullScreen = () => {
    this?.videoContext?.requestFullScreen();
    console.log('fullScreen');
  }

  render () {
    return (
      <View>
        <View className='test-item'>
          <View className='components-page'>
              <View className='test-item'>
              <View className="test-block-hd">
                <Text className="test-block-hd__text"> —— 视频组件测试 —— </Text>
              </View>

              <View className="test-block-bd">
                <View className='components-page'>
                <Text className="bug-title">问题：initialTime设置无效</Text>
                  <Video
                    src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
                    autoplay
                    initialTime={20000}
                    id='video'
                  />
                  <View className='control-list'>
                    <Button type="primary" onClick={this.fullScreen}>进入全屏</Button>
                  </View>
                </View>
              </View>    
            </View>
          </View>
        </View>
      </View>
    )
  }
}

Video组件onPause事件不会触发

问题描述

Video组件在暂停视频时，onPause事件不会触发

期望

onPause事件在视频暂停时触发

复现代码

<Video
  src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
  autoplay
  controls
  poster="https://tukuimg.bdstatic.com/processed/59dfed09b5efe57cdc0f3b7c4d2b2d2f.jpeg@s_0,w_660,h_370,q_80,f_webp"
  onPause={this.onPause}
  objectFit='contain'
  id='video'
/>

createCameraContext首次调用返回undefined

问题描述

APP重新加载后，第一次调用API createCameraContext，返回的内容总是undefined

期望

调用createCameraContext，返回一个CameraContext对象

复现代码

this.cameraContext = Taro.createCameraContext()

wuba / taro-react-native Goto Github PK

taro-react-native's Introduction

Taro

目录

简介

版本迁移

学习资源

社区共享

UI 库

使用案例

特性介绍

跨框架支持

React/Nerv 支持

Vue 支持

多端转换支持

加入共建

加入 Taro 社区共建倡议

为 Taro 贡献代码

问题反馈与建议

特别鸣谢

贡献者们

开发计划

更新日志

开发交流

License

taro-react-native's People

Contributors

Stargazers

Watchers

Forkers

taro-react-native's Issues

问题描述

解决方案

需求描述

问题描述

解决方案

问题描述

期望

复现代码

问题描述

解决方案

问题描述

期望

复现代码

问题描述

解决方案

问题描述

解决方案

问题描述

解决方案

问题描述

解决方案

问题描述

�解决方案

问题描述

期望

复现代码

问题描述

解决方案

问题描述

解决方案

问题描述

解决方案

问题描述

解决方案

问题描述

解决方案

问题描述

解决方案

问题描述

期望

问题描述

解决方案

问题描述

解决方案

问题描述

解决方案

问题描述

解决方案

问题描述