Я пытаюсь использовать api контекстного хука в приложении реакции на нативном.Я создаю тему, провайдер для реакции-навигации AppContainer и потребительский компонент для детей.Тема не изменяется на первом дочернем компоненте, на другом компоненте работает хорошо.Я слежу за документацией по поводу реагирующего контекста.Не найти документ для реагирования родного контекста API.
#theme-context.js
import React from 'react';
export const themes = {
light: {
colorfont: '#000',
background: '#fff',
},
dark: {
colorfont: '#fff',
background: '#000',
},
};
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {},
});
#app.js
....
import {ThemeContext, themes} from './theme-context';
const AppNavigator = createStackNavigator({
Home: MainTabs,
OnePage: OnePage,
},
{
cardStyle: {
shadowColor: 'transparent',
backgroundColor: 'transperent'
},
initialRouteName: 'Home',
headerMode: "none"
}
);
const AppContainer = createAppContainer(AppNavigator);
class App extends Component {
constructor(props) {
super(props);
this.toggleTheme = () => {
this.setState(state => ({
theme:
state.theme === themes.dark ? themes.light : themes.dark,
}));
};
this.state = {
theme: themes.light,
toggleTheme: this.toggleTheme,
};
}
render() {
return (
<View style={styles.container}>
<Root>
<ThemeContext.Provider value={this.state}>
<AppContainer />
</ThemeContext.Provider>
</Root>
</View>
);}}
export default App;
#MainTabs.js ...
import {ThemeContext} from '../theme-context';
class MainTabs extends Component {
render() {
return (
<ThemeContext.Consumer>
{({theme}) => (
<Container>
<Header hasTabs style={{backgroundColor: theme.background}}>
<StatusBar backgroundColor={theme.background} barStyle="light-
content" />
<Left></Left>
<Body>
<Title style={{color: theme. colorfont}}>The Quran</Title>
</Body>
</Header>
<Tabs tabBarUnderlineStyle={{backgroundColor: '#fff'}}
renderTabBar={()=> <ScrollableTab style={{backgroundColor:
theme.background}} />}>
<Tab style={{backgroundColor: theme.background}} heading={
<TabHeading style={{ flexDirection: 'column', backgroundColor:
theme.backgroundheader }}>
<Icon name="document" style={{color: '#fff', fontSize: 20}} />
<Text style={{color: '#fff'}}>Sura</Text>
</TabHeading>}>
<Sura />
</Tab>
<Tab style={{backgroundColor: theme.background}} heading={
<TabHeading style={{ flexDirection: 'column', backgroundColor:
theme.backgroundheader }}>
<Icon style={{color: '#fff', fontSize: 20}} name="cog" />
<Text style={{color: '#fff'}}>Settings</Text>
</TabHeading>}>
<Settings />
</Tab>
</Tabs>
</Container>
)}
</ThemeContext.Consumer>
);}}
export default MainTabs;
#sura.js
import {ThemeContext} from '../theme-context'
class Sura extends Component {
render() {
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return (
<ThemeContext.Consumer>
{({theme}) => (
<Content>
<FlatList
data={this.state.dataSource}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) =>
<ListItem key={index} icon button={true} onPress={()
=> this.props.navigation.navigate('OnePage', {numpage: item.page,
numsura: item.number})}>
<Left>
<View style={{ backgroundColor:
theme.backgroun, height: 30, width: 30, alignItems: 'center',
justifyContent: 'center', borderRadius: 50}}>
<Text style={{ fontSize: 14, color:
"#fff"}}>{item.number}</Text>
</View>
</Left>
<Body>
<Text style={{color: theme.colorfont}}> .
{item.englishName}</Text>
<Text style={{color: theme.colorfont}} note> .
{item.revelationType} - {item.numberOfAyahs} verses</Text>
</Body>
<Right>
<Text>{item.page}</Text>
</Right>
</ListItem>
}
/>
</Content>
)}
</ThemeContext.Consumer>
); }}
export default withNavigation(Sura);
#settings.js
import {ThemeContext} from '../theme-context';
const WIDTH = Dimensions.get('window').width;
class Settings extends Component {
render() {
return (
<ThemeContext.Consumer>
{({theme, toggleTheme}) => (
<Content>
<View>
<Text style={{width: WIDTH, backgroundColor:
theme.backgroundheader, color: '#fff', paddingHorizontal: 15,
paddingVertical: 10 }}>Select translate - tefsir</Text>
<TouchableHighlight >
<ListItem style={{paddingTop: 5,
paddingBottom: 5 }} button={true} onPress={() =>
this.props.navigation.navigate('TraslationsPage')}>
<Left>
<Text style={{color: theme.colorfont,
alignSelf: 'baseline'}}>Translate</Text>
</Left>
<Right>
<Button transparent >
<Icon style={{fontSize: 24, color:
theme.colorfont}} name="arrow-forward" />
</Button>
</Right>
</ListItem>
</TouchableHighlight>
</View>
<View>
<Text style={{width: WIDTH, backgroundColor:
theme.backgroundheader, color: '#fff', paddingHorizontal: 15,
paddingVertical: 10 }}>Select light or dark mode</Text>
<View style={{width: WIDTH, flexDirection: 'row',
paddingHorizontal: 15, paddingVertical: 20}}>
<TouchableOpacity
style={{textAlign: 'center', width: WIDTH
/ 2, alignItems: 'center', justifycontent: 'center', flex: 1}}
onPress={toggleTheme}>
<View style={{width: 40,height: 40,
backgroundColor:'#fff', borderRadius:50,borderWidth:
1,borderColor: theme.borderColor, overflow: 'hidden'}}></View>
</TouchableOpacity>
<TouchableOpacity
style={{textAlign: 'center', width: WIDTH
/ 2, alignItems: 'center', justifycontent: 'center', flex: 1}}
onPress={toggleTheme}>
<View style={{width: 40,height: 40,
backgroundColor:'#000', borderRadius:50,borderWidth:
1,borderColor: theme.borderColor, overflow: 'hidden'}}> .
</View>
</TouchableOpacity>
</View>
</View>
</Content>
)}
</ThemeContext.Consumer>
);}}
export default withNavigation(Settings);