访问React Native中的上下文

Question

在react native中，我有以下文件：

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}，这样我就可以把我所有的"共享的"；上下文中的函数、状态等可以从任何地方使用。我只是想知道我是否也可以在App.js中访问它们，而无需编写另一个组件；看起来我是否导入

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

然后我添加这个

const { dummy, setDummy } = useMain();

对于我的应用程序，它不起作用，所以我想我只能在child中访问上下文中的内容，但第一个View也是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;