0

所以我需要访问上下文的值而不将其作为渲染函数调用。

不像这样：

const Child = () => {
  return (
    <ThemeConsumer>
      {context => {return <Text>{context}</Text>}}
    </ThemeConsumer>
  );
};

到目前为止我有这个：

import React from 'react';
export const ThemeContext = React.createContext(0);
export const ThemeProvider = ThemeContext.Provider;
export const ThemeConsumer = ThemeContext.Consumer;

我正在使用这样的提供者：

  render() {
    const { index } = this.state;
    return (
      <ThemeProvider value={index}>
        <TabView
          key={Math.random()}
          navigationState={this.state}
          renderScene={this.renderScene}
          renderTabBar={this.renderTabBar}
          onIndexChange={this.handleIndexChange}
        />
      </ThemeProvider>
    );
  }

那样行吗？

到目前为止，我遇到的主要问题是，我需要该值的地方既不是类也不是功能组件。

我需要做这样的事情：

import { ThemeConsumer } from '../../context/BottomNavigationTheme';
import HomeScreen from '../screens/HomeScreen';
import HomeScreen2 from '../screens/HomeScreen2';

functionToGetContextValue = () => valueFromContext;

const HomeStack = createStackNavigator({
  Home: functionToGetContextValue ? HomeScreen : HomeScreen2, // HERE I NEED IT
});

HomeStack.navigationOptions = {
  tabBarLabel: 'All Passengers',
  tabBarIcon: ({ focused }) => <AllPassengersIcon focused={focused} />,
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

我应该怎么做才能访问该值？

4

1 回答 1

0

您可以使用 HOC。创建一个函数withTheme

export const withTheme = Component => props => (
  <ThemeConsumer>
    {context => <Component {...props} them={context} />
  </ThemeConsumer>
)

然后在您想要的任何子组件中使用。

class TabView extends React.PureComponent {
  componentDidMount() {
    console.log(this.props.theme)
  }
  ...
}

export default withTheme(TabView)

一个工作Context在HOC这里https://codesandbox.io/s/o91vrxlywy

如果您使用 React 钩子（16.8 版），您可以使用useContextAPI https://reactjs.org/docs/hooks-reference.html#usecontext

于 2019-02-16T01:46:06.330 回答