当前位置:   article > 正文

安卓屏幕亮度调节brightness_有什么react-native的第三方库可以修改手机的亮度

有什么react-native的第三方库可以修改手机的亮度

这个包写在项目的modules中,参考gitHub上的example,代码块是自己改的ts写法,react新人,对hooks的理解很浅薄,欢迎各位大神指导

  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. *
  5. * @format
  6. * @flow
  7. */
  8. import {
  9. GestureResponderEvent,
  10. SafeAreaView,
  11. ScrollView,
  12. Slider,
  13. StatusBar,
  14. StyleSheet,
  15. Text,
  16. TouchableOpacity,
  17. View,
  18. } from 'react-native';
  19. import React, { Fragment } from 'react';
  20. import { Colors } from 'react-native/Libraries/NewAppScreen';
  21. import Brightness from 'react-native-brightness';
  22. type ValueViewProps = {
  23. title: string;
  24. value?: number;
  25. changeVal?: (value: number) => void;
  26. refFunc?: React.LegacyRef<Slider>;
  27. btn?: {
  28. onPress?: (event: GestureResponderEvent) => void;
  29. title: string;
  30. };
  31. };
  32. const ValueView = (props: ValueViewProps) => {
  33. const { title, value, changeVal, refFunc, btn } = props;
  34. return (
  35. <View style={styles.card}>
  36. <View style={styles.row}>
  37. <Text style={styles.title}>{title}</Text>
  38. {btn && (
  39. <TouchableOpacity onPress={btn.onPress}>
  40. <Text style={styles.btn}>{btn.title}</Text>
  41. </TouchableOpacity>
  42. )}
  43. <Text style={styles.value}>{value}</Text>
  44. </View>
  45. <Slider ref={refFunc} value={value} onValueChange={changeVal} />
  46. </View>
  47. );
  48. };
  49. class App extends React.PureComponent<any, { brightness: number }> {
  50. sliderBri: Slider | null;
  51. constructor(props: any) {
  52. super(props);
  53. this.state = {
  54. brightness: 0,
  55. };
  56. this.sliderBri = null;
  57. }
  58. componentDidMount() {
  59. console.log('Brightness', Brightness);
  60. Brightness.getBrightness().then((level) => {
  61. console.log('getBrightness level', level);
  62. this.setState({ brightness: level });
  63. });
  64. Brightness.hasPermission().then((hasPermission: boolean) => {
  65. console.log('hasPermission', hasPermission);
  66. if (!hasPermission) {
  67. Brightness.requestPermission();
  68. }
  69. });
  70. }
  71. _changeBrightness = async (value: number) => {
  72. const result = await Brightness.setBrightness(value);
  73. this.setState({
  74. brightness: value,
  75. });
  76. };
  77. render() {
  78. const { brightness } = this.state;
  79. return (
  80. <Fragment>
  81. <StatusBar barStyle="dark-content" />
  82. <SafeAreaView>
  83. <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}>
  84. <View style={styles.body}>
  85. <View style={styles.sectionContainer}>
  86. <ValueView
  87. title="Brightness"
  88. value={brightness}
  89. changeVal={(val) => this._changeBrightness(val)}
  90. refFunc={(sliderBri) => (this.sliderBri = sliderBri)}
  91. />
  92. </View>
  93. </View>
  94. </ScrollView>
  95. </SafeAreaView>
  96. </Fragment>
  97. );
  98. }
  99. }
  100. const styles = StyleSheet.create({
  101. scrollView: {
  102. backgroundColor: Colors.lighter,
  103. },
  104. engine: {
  105. position: 'absolute',
  106. right: 0,
  107. },
  108. body: {
  109. backgroundColor: Colors.white,
  110. },
  111. sectionContainer: {
  112. marginTop: 32,
  113. paddingHorizontal: 24,
  114. },
  115. sectionTitle: {
  116. fontSize: 24,
  117. fontWeight: '600',
  118. color: Colors.black,
  119. },
  120. sectionDescription: {
  121. marginTop: 8,
  122. fontSize: 18,
  123. fontWeight: '400',
  124. color: Colors.dark,
  125. },
  126. highlight: {
  127. fontWeight: '700',
  128. },
  129. footer: {
  130. color: Colors.dark,
  131. fontSize: 12,
  132. fontWeight: '600',
  133. padding: 4,
  134. paddingRight: 12,
  135. textAlign: 'right',
  136. },
  137. card: {
  138. padding: 8,
  139. backgroundColor: '#fff',
  140. marginVertical: 4,
  141. },
  142. row: {
  143. flexDirection: 'row',
  144. alignItems: 'center',
  145. paddingVertical: 8,
  146. },
  147. title: {
  148. fontSize: 16,
  149. color: '#6F6F6F',
  150. },
  151. value: {
  152. fontSize: 14,
  153. flex: 1,
  154. textAlign: 'right',
  155. color: '#904ED9',
  156. },
  157. split: {
  158. marginVertical: 16,
  159. height: 1,
  160. backgroundColor: '#ccc',
  161. },
  162. btn: {
  163. fontSize: 16,
  164. padding: 8,
  165. paddingVertical: 8,
  166. color: '#405EFF',
  167. },
  168. });
  169. export default App;
  170. 参考: https://github.com/cca6286pro/react-native-brightness

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/642991
推荐阅读
相关标签
  

闽ICP备14008679号