refactor(rn tester app): change appearence example to hooks (#35114)
Summary: This pull request migrates the appearance example to using React Hooks. ## Changelog [General] [Changed] - RNTester: Migrate Appearence to hooks Pull Request resolved: https://github.com/facebook/react-native/pull/35114 Test Plan: The animation works exactly as it did as when it was a class component Reviewed By: cortinico Differential Revision: D41531005 Pulled By: cipolleschi fbshipit-source-id: a864766a3bb58a7f0c2b9c4ed8f731ee84713b26
This commit is contained in:
Родитель
90871861ce
Коммит
22576fa615
|
@ -9,47 +9,36 @@
|
|||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import {useState, useEffect} from 'react';
|
||||
import {Appearance, Text, useColorScheme, View} from 'react-native';
|
||||
import type {AppearancePreferences} from 'react-native/Libraries/Utilities/NativeAppearance';
|
||||
import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
|
||||
import {RNTesterThemeContext, themes} from '../../components/RNTesterTheme';
|
||||
|
||||
class ColorSchemeSubscription extends React.Component<
|
||||
{...},
|
||||
{colorScheme: ?string, ...},
|
||||
> {
|
||||
_subscription: ?EventSubscription;
|
||||
function ColorSchemeSubscription() {
|
||||
const [colorScheme, setScheme] = useState(Appearance.getColorScheme());
|
||||
|
||||
state: {colorScheme: ?string, ...} = {
|
||||
colorScheme: Appearance.getColorScheme(),
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this._subscription = Appearance.addChangeListener(
|
||||
useEffect(() => {
|
||||
const subscription = Appearance.addChangeListener(
|
||||
(preferences: AppearancePreferences) => {
|
||||
const {colorScheme} = preferences;
|
||||
this.setState({colorScheme});
|
||||
const {colorScheme: scheme} = preferences;
|
||||
setScheme(scheme);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._subscription?.remove();
|
||||
}
|
||||
return () => subscription?.remove();
|
||||
}, [setScheme]);
|
||||
|
||||
render(): React.Node {
|
||||
return (
|
||||
<RNTesterThemeContext.Consumer>
|
||||
{theme => {
|
||||
return (
|
||||
<ThemedContainer>
|
||||
<ThemedText>{this.state.colorScheme}</ThemedText>
|
||||
</ThemedContainer>
|
||||
);
|
||||
}}
|
||||
</RNTesterThemeContext.Consumer>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<RNTesterThemeContext.Consumer>
|
||||
{theme => {
|
||||
return (
|
||||
<ThemedContainer>
|
||||
<ThemedText>{colorScheme}</ThemedText>
|
||||
</ThemedContainer>
|
||||
);
|
||||
}}
|
||||
</RNTesterThemeContext.Consumer>
|
||||
);
|
||||
}
|
||||
|
||||
const ThemedContainer = (props: {children: React.Node}) => (
|
||||
|
@ -69,7 +58,7 @@ const ThemedContainer = (props: {children: React.Node}) => (
|
|||
</RNTesterThemeContext.Consumer>
|
||||
);
|
||||
|
||||
const ThemedText = (props: {children: React.Node}) => (
|
||||
const ThemedText = (props: {children: React.Node | string}) => (
|
||||
<RNTesterThemeContext.Consumer>
|
||||
{theme => {
|
||||
return <Text style={{color: theme.LabelColor}}>{props.children}</Text>;
|
||||
|
|
Загрузка…
Ссылка в новой задаче