Skip to content

Latest commit

 

History

History
314 lines (263 loc) · 9.83 KB

react-subscribe.md

File metadata and controls

314 lines (263 loc) · 9.83 KB

模板版本：v0.2.2

react-subscribe

Supported platforms License

[!TIP] Github 地址

安装与使用

npm

npm install [email protected]

yarn

yarn add [email protected]

下面的代码展示了Timer这个组件的基本使用场景：

import React from 'react';
import { Timer } from 'react-subscribe';
import { Text, View,Button} from 'react-native'

export class ReactSubscribeTimerTest extends React.Component {
  state = {
    cd: this.props.cd,
    listening:false
  };
  onTimer = () => {
    this.setState({ cd: this.state.cd - this.props.interval/1000,listening:true });
  };
  timeClick = () => {
    this.setState({cd: this.props.cd,listening: true});
  };
  render() {
    if (this.state.cd <= 0) {
      return (
        <View>
          <Button title='点击' onPress={() => this.timeClick()}>点击</Button>
          <Text>Cooldown is over and onTimer will not be called again!</Text>
        </View>
      );
    }
    return (
      <View>
        <Button title='点击' onPress={() => this.timeClick()}>点击</Button>
        {this.state.listening && <Timer interval={this.props.interval} onTimer={this.onTimer}><Text>There is still {this.state.cd} seconds to go.</Text></Timer>}
        <Text>点击按钮启动倒计时</Text>
      </View>
    );
  }
}

下面的代码展示了Subscribe这个组件的基本使用场景：

[!WARNING] 使用时 target一般配合fbemitter组件使用

import React from 'react';
import { Subscribe } from 'react-subscribe';
import { TextInput, Text, View,Button} from 'react-native'

export class ReactSubscribeSubscribeTest extends React.Component {
  state = {
    listening : true
  }

  eventName='test1';
  message = '';
  eventType = 1;

  test1Message;
  test2Message;
  test3Message;


  onChangeText(eventName){
    this.eventName = eventName;
  }

  onChangeMessage(message){
    this.message = message;
  }

  eventNameEvent = (ev) => {
    this.setState({
      listening : true
    })
    this.test1Message = ev.message;
  };

  otherEvent = (ev) => {
    this.setState({
      listening : true
    })
    this.test2Message = ev.message;
  };

  sendMessage(){
    if(this.eventName === 'test1'){
      this.props.eventEmitter1.emit(this.eventName, { message: this.message});
    }else{
      this.props.eventEmitter2.emit(this.eventName, { message: this.message});
    }
  }

  render() {
    return (
      <View>
        <TextInput
          placeholder="请输入内容eventName（只有test1和test2输入其他无效）"
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={text => this.onChangeText(text)}
          value={111}
        />
        <TextInput
          placeholder="请输入内容发送内容"
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={text => this.onChangeMessage(text)}
          value={111}
        />
        <Button title='点击发送' onPress={() => this.sendMessage()}>点击</Button>
        <Text>'1.监听test1'</Text>
        <Subscribe target={this.props.eventEmitter1} eventName="test1" listener={this.eventNameEvent} />
        {this.test1Message !== null && <Text>test1监听数据:{this.test1Message}</Text>}
        <Text>'2.监听test2'</Text>
        <Subscribe target={this.props.eventEmitter2} eventName="test2" listener={this.otherEvent} >
          <Text>test2监听数据:{this.test2Message}</Text>
        </Subscribe>
      </View>
    );
  }
}

使用样例

import { EventEmitter } from 'fbemitter';

<ReactSubscribeSubscribeTest eventEmitter1={eventEmitter1} eventEmitter2={eventEmitter1}/>

下面的代码展示了Fetch这个组件的基本使用场景：

import React from 'react';
import { View,StyleSheet,Text,TouchableOpacity,Button } from 'react-native';
import { Fetch } from 'react-subscribe';
import axios from 'axios';

export class ReactSubscribeFetchTest extends React.Component {

  state = {
    listening:false
  };

  timeClick = () => {
    this.setState({listening: true});
  };

  fetch_option = {
    timeout: 5000,
    method: this.props.method,
    headers: {
      'X-AccessToken': 'some_token',
      "Content-Type":this.props.contentType
    },
    body:this.props.body,
    credentials: 'include', // Default credentials is 'same-origin' in `Fetch`
  };
  
  render (){
    if(this.props.manners === 1){
      return(
        <View>
         <Button title='点击' onPress={() => this.timeClick()}>点击</Button>
          {this.state.listening && <Fetch doFetch={customRequest} url={this.props.url}>
          <SomeComponent2/>
        </Fetch>}
      </View>
      )
    }
    return(
      <View>
       <Button title='点击' onPress={() => this.timeClick()}>点击</Button>
        {this.state.listening && <Fetch url={this.props.url} type={this.props.type} options={this.fetch_option}>
        <SomeComponent/>
      </Fetch>}
    </View>
    )
  };
}

function SomeComponent({ data, loading, error, reload, statusCode }) {
  if (loading) {
    return <View><Text>loading...</Text></View>;
  }
  if (error) {
    return (
      <View>
        <Text>error:{error.message}</Text>
        <Button title='点击重新请求' onPress={() => reload()}>点击</Button>
      </View>
    );
  }

  return (
    <View>
      <Text>Status Code: {statusCode}</Text>
      <Text>{JSON.stringify(data)}</Text>
    </View>
  );
}

async function customRequest(url) {
  return axios.get(url,{params:{
    value:'自定义组件请求',
  }});
}

function SomeComponent2({ data, loading, error, reload }) {
  if (loading) {
    return <View><Text>loading...</Text></View>;
  }
  if (error) {
    return (
      <View>
        <Text>Error: {error.message}</Text>
        <Button title='点击重新请求' onPress={() => reload}>点击</Button>
      </View>
    );
  }
  return (
    <View>
      <Text>Status Code: {data.status}</Text>
      <Text>{JSON.stringify(data.data)}</Text>
    </View>
  );
}

约束与限制

兼容性

本文档内容基于以下版本验证通过：

  1. RNOH: 0.72.26; SDK：HarmonyOS-Next-DB1; IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.25;
  2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

react-subscribe:

Fetch组件详情见react-subscribe

Name Description Type Required Platform HarmonyOS Support
url 请求接口url string no Android/iOS yes
options 请求参数（如果使用doFetch，参数不生效） object no Android/iOS yes
doFetch 自定义的请求服务端方法，方法接收参数为组件url function no Android/iOS yes
type 请求返回数据处理的类型(值只能为'text'或 'json'或'blob') string yes Android/iOS yes
children 子组件，接收请求返回数据处理,接收参数有(loading:是否在请求中,statusCode：请求状态码（自定义请求不设置该值）,data:返回业务数据,error:请求错误信息（例：请求超时）,reload:刷新当前请求方法) element no Android/iOS yes

Timer组件详情见react-subscribe

Name Description Type Required Platform HarmonyOS Support
interval 执行间隔时间（毫秒） number no Android/iOS yes
onTimer 定时执行方法 function no Android/iOS yes
children 子组件 element no Android/iOS yes

Subscribe组件详情见react-subscribe

Name Description Type Required Platform HarmonyOS Support
target 发射器（一般配合fbemitter组件使用） object no Android/iOS yes
eventName 事件名称 string no Android/iOS yes
listener 监听方法（当发射器触发当前事件时执行的方法） function no Android/iOS yes
children 子组件 element no Android/iOS yes

SubscribeDOM组件详情见react-subscribe

Name Description Type Required Platform HarmonyOS Support
target 发射器（一般配合web中document使用） object no webOnly no
eventName 事件名称 string no webOnly no
listener 监听方法（当发射器触发当前事件时执行的方法） function no webOnly no
children 子组件 element no webOnly no

遗留问题

其他

开源协议

本项目基于 The ISC License (ISC) ，请自由地享受和参与开源。