模板版本：v0.4.0

react-native-switch-pro

本项目基于 react-native-switch-pro 开发。

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-ohos/react-native-switch-pro Releases。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

三方库名称	三方库版本	发布信息	支持RN版本	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-switch-pro	~1.1.0	GitCode Releases	0.77/0.82	API12+	1.0.5	Npm Address
@react-native-ohos/react-native-switch-pro	~1.0.6	Github Releases	0.72	API12+	1.0.5	Npm Address
@react-native-oh-tpl/react-native-switch-pro	<1.0.5-0.0.1@deprecated	Github Releases	0.72	API12+	1.0.5	Npm Address

1. 安装与使用

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-switch-pro

yarn

yarn add @react-native-ohos/react-native-switch-pro

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

import { Component } from 'react'
import Switch from 'react-native-switch-pro'
import {
  StyleSheet,
  Text,
  View
} from 'react-native'

export default class Example extends Component {
  state={
    value: false
  }

  render() {
    return (
      <View style={styles.container}>
        <Switch /><Text> uncontrolled </Text>
        <Switch 
          value={this.state.value} 
          style={{marginTop: 20}} 
          onSyncPress={(value) => this.setState({value})} 
        />
        <Text> two way binding </Text>
        <Switch value={this.state.value} style={{marginTop: 20}} />
        <Text> controlled by outside </Text>
        <Switch
          width={60}
          height={30}
          style={{marginTop: 20}}
          value={this.state.value}
          onAsyncPress={(callback) => {
            setTimeout(() => callback(true, (value) => this.setState({value})), 1000)
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#5174a2',
  }
});

2. 约束与限制

2.1. 兼容性

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

1. RNOH: 0.72.23; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.27; ROM: 3.0.0.19;
2. RNOH: 0.72.38; SDK: HarmonyOS-5.0.0(API12); IDE: DevEco Studio 5.0.3.27; ROM: 5.0.0.107;
3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;
4. RNOH: 0.82.7; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM: 6.1.0.117;

3. 属性

Name	Description	Type	Required	Platform	HarmonyOS Support
width	开关宽度	number	no	Android/IOS	yes
height	开关高度	number	no	Android/IOS	yes
value	支持双向绑定的开关状态	bool	no	Android/IOS	yes
disabled	开关是否可点击	bool	no	Android/IOS	yes
circleColorActive	开关开启状态下圆形控制柄的颜色	string	no	Android/IOS	yes
circleColorInactive	开关关闭状态下圆形控制柄的颜色	string	no	Android/IOS	yes
style	将应用于开关容器的样式	style	no	Android/IOS	yes
circleStyle	将应用于圆形控制柄的样式	style	no	Android/IOS	yes
backgroundActive	开关开启时的颜色	string	no	Android/IOS	yes
backgroundInactive	开关关闭时的颜色	string	no	Android/IOS	yes
onSyncPress	点击开关时的回调	func	no	Android/IOS	yes
onAsyncPress	有一个回调结果为async	func	no	Android/IOS	yes

4. 注意

• 最好不要同时使用 onSyncPress 和 onAsyncPress，否则只会调用 onSyncPress。

• value 与双向绑定一起使用，可以是 redux、state 等。 在 onAsyncPress 中，您应该写如下（带有状态）：

  <Switch
    value={this.state.value}
    onAsyncPress={(callback) => {
      callback(false or true, value => this.setState({value}))
   }}
  />
  

  value => this.setState({value})仅当 result 为 true 时才会调用。

5. 遗留问题

6. 其他

7. 开源协议

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