赞
踩
这个包写在项目的modules中,参考gitHub上的example,代码块是自己改的ts写法,react新人,对hooks的理解很浅薄,欢迎各位大神指导
-
- /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
- import {
- GestureResponderEvent,
- SafeAreaView,
- ScrollView,
- Slider,
- StatusBar,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
- } from 'react-native';
- import React, { Fragment } from 'react';
-
- import { Colors } from 'react-native/Libraries/NewAppScreen';
-
- import Brightness from 'react-native-brightness';
-
- type ValueViewProps = {
- title: string;
- value?: number;
- changeVal?: (value: number) => void;
- refFunc?: React.LegacyRef<Slider>;
- btn?: {
- onPress?: (event: GestureResponderEvent) => void;
- title: string;
- };
- };
-
- const ValueView = (props: ValueViewProps) => {
- const { title, value, changeVal, refFunc, btn } = props;
- return (
- <View style={styles.card}>
- <View style={styles.row}>
- <Text style={styles.title}>{title}</Text>
- {btn && (
- <TouchableOpacity onPress={btn.onPress}>
- <Text style={styles.btn}>{btn.title}</Text>
- </TouchableOpacity>
- )}
- <Text style={styles.value}>{value}</Text>
- </View>
- <Slider ref={refFunc} value={value} onValueChange={changeVal} />
- </View>
- );
- };
-
- class App extends React.PureComponent<any, { brightness: number }> {
- sliderBri: Slider | null;
-
- constructor(props: any) {
- super(props);
- this.state = {
- brightness: 0,
- };
- this.sliderBri = null;
- }
-
- componentDidMount() {
- console.log('Brightness', Brightness);
- Brightness.getBrightness().then((level) => {
- console.log('getBrightness level', level);
- this.setState({ brightness: level });
- });
- Brightness.hasPermission().then((hasPermission: boolean) => {
- console.log('hasPermission', hasPermission);
- if (!hasPermission) {
- Brightness.requestPermission();
- }
- });
- }
-
- _changeBrightness = async (value: number) => {
- const result = await Brightness.setBrightness(value);
- this.setState({
- brightness: value,
- });
- };
-
- render() {
- const { brightness } = this.state;
- return (
- <Fragment>
- <StatusBar barStyle="dark-content" />
- <SafeAreaView>
- <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}>
- <View style={styles.body}>
- <View style={styles.sectionContainer}>
- <ValueView
- title="Brightness"
- value={brightness}
- changeVal={(val) => this._changeBrightness(val)}
- refFunc={(sliderBri) => (this.sliderBri = sliderBri)}
- />
- </View>
- </View>
- </ScrollView>
- </SafeAreaView>
- </Fragment>
- );
- }
- }
-
- const styles = StyleSheet.create({
- scrollView: {
- backgroundColor: Colors.lighter,
- },
- engine: {
- position: 'absolute',
- right: 0,
- },
- body: {
- backgroundColor: Colors.white,
- },
- sectionContainer: {
- marginTop: 32,
- paddingHorizontal: 24,
- },
- sectionTitle: {
- fontSize: 24,
- fontWeight: '600',
- color: Colors.black,
- },
- sectionDescription: {
- marginTop: 8,
- fontSize: 18,
- fontWeight: '400',
- color: Colors.dark,
- },
- highlight: {
- fontWeight: '700',
- },
- footer: {
- color: Colors.dark,
- fontSize: 12,
- fontWeight: '600',
- padding: 4,
- paddingRight: 12,
- textAlign: 'right',
- },
-
- card: {
- padding: 8,
- backgroundColor: '#fff',
- marginVertical: 4,
- },
- row: {
- flexDirection: 'row',
- alignItems: 'center',
- paddingVertical: 8,
- },
- title: {
- fontSize: 16,
- color: '#6F6F6F',
- },
- value: {
- fontSize: 14,
- flex: 1,
- textAlign: 'right',
- color: '#904ED9',
- },
- split: {
- marginVertical: 16,
- height: 1,
- backgroundColor: '#ccc',
- },
- btn: {
- fontSize: 16,
- padding: 8,
- paddingVertical: 8,
- color: '#405EFF',
- },
- });
-
- export default App;
-
-
- 参考: https://github.com/cca6286pro/react-native-brightness
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。