在 React Native 中访问上下文

Question

在本机反应中我有以下文件：

App.js

import { StyleSheet, Text, View } from 'react-native';
import Children from './Child';
import { MyProvider } from './context/Context';
import React from 'react';

const App = () => {
  return (
    <MyProvider>
      <View style={styles.container}>
        <Children />
        <StatusBar style="auto" />
      </View>
    </MyProvider>
  );
};

export default App;

Child.js

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useMain } from './context/Context';

const Child = () => {
  const { dummy, setDummy } = useMain();
  const onPressLearnMore = () => {
    setDummy('c');
  };
  return (
    <View>
      <Text>This children {dummy}</Text>
      <Button onPress={onPressLearnMore} title="click" />
    </View>
  );
};

export default Child;

Context.js

import React, { useContext, useEffect, useState } from 'react';
export const mainContext = React.createContext();

export function useMain() {
  return useContext(mainContext);
}
export function MyProvider({ children }) {
  const [dummy, setDummy] = useState('a');
  useEffect(() => {
    setDummy('b');
  }, []);
  function doNull() {
    console.log('do null');
  }
  const value = {
    dummy,
    setDummy,
  };
  return <mainContext.Provider value={value}>{children}</mainContext.Provider>;
}

一切都按预期工作，Children 组件可以访问 { dummy } 和 { setDummy }，这样我就可以将我所有的“共享”功能、状态等放在 Context 中，以便在任何地方使用。我只是想知道我是否也可以在 App.js 中访问它们而无需编写另一个组件；看起来我是否导入

import { useMain } from './context/Context';

然后我添加这个

const { dummy, setDummy } = useMain();

对于我的应用程序，它不起作用，所以我想我只能在 child 中从上下文访问内容，但第一个视图也是 child！

如果我需要访问 Context 是否应该创建一个新组件，或者也可以从 MyProvider 级别访问它？

Answer 1

第一个视图确实是您的提供者的子视图，但 App 不是，所以是的，如果您想从中访问您的上下文，您需要将视图提取为单独的组件。

import { StyleSheet, Text, View } from 'react-native';
import Children from './Child';
import { MyProvider, useMain } from './context/Context';
import React from 'react';

const Container = () => {
  const { dummy, setDummy } = useMain();

  return (
    <View style={styles.container}>
      <Children />
      <StatusBar style="auto" />
    </View>
  )
}

const App = () => {
  return (
    <MyProvider>
      <Container />
    </MyProvider>
  );
};

export default App;

在 React Native 中访问上下文

Accessing Context in React Native

react-native

use-context