这个包写在项目的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