我正在尝试添加主题来响应本机应用程序,但不知何故它不起作用。请帮忙。
我有一个背景:
import * as React from 'react';
export const VBContext = React.createContext({});
export default VBContext;
然后我有一个自定义的提供者,我使用它:
import * as React from 'react';
import { VBContext } from './Context';
class Vbcrider extends React.Component<any, any> {
constructor(props) {
super(props)
const { style } = props
this.state = {
style
}
}
render() {
const { children } = this.props;
const Context = VBContext;
return (
<Context.Provider value={this.state.style}>
{children}
</Context.Provider>
);
}
}
export default Vbcrider;
我还有一个hoc,它应该将此上下文提供给其他组件:
import * as React from 'react';
import { VBContext } from './Context';
function withStyle(WrappedComponent) {
return class extends React.Component<any, any> {
render() {
const Context = VBContext;
return (
<Context.Consumer>
{
() => <WrappedComponent {...this.props} />
}
</Context.Consumer>
);
}
};
}
export default withStyle;
还有一个按钮,我使用上面提到的hoc:
@withStyle
class Button extends React.Component<any, any> {
style () {
const {
type,
theme
} = this.props;
return {
//some logic based on theme
}
}
render () {
const {
onPress,
children
} = this.props;
return (
<TouchableOpacity style={this.style()} onPress={() => onPress}>
{children}
</TouchableOpacity>
)
}
}
但在按钮和特殊上下文中,对象只是空的。不明白为什么。感谢您的帮助。
<Vbcrider style={{
primaryBackgroundColor: '#0000FF',
primaryBorderColor: '#0000CF',
warningBackgroundColor: '#FFA500',
warningBorderColor: '#FF8C00'
}}>
<App
rootReducers={rootReducers}
initialState={{}}
Navigator={RootPageNavigator}
/>
</Vbcrider>