下面这个方法是在RN使用全局数据共享的,使用原生React的方式搞得,相对于Redux配置相对简单,适合小型项目
项目内创建MyContext.js
// MyContext.jsimport React from 'react';const MyContext = React.createContext();export default MyContext;
App.js引入
// App.jsimport React, { useState } from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';function App() {// 多个数据的话使用对象包裹const [globalData, setGlobalData] = useState({message: 'Hello from Context!',count: 0});// 修改文字const updateMessage = (newMessage) => {setGlobalData({ ...globalData, message: newMessage });};// 点击将count+1const incrementCount = () => {setGlobalData({ ...globalData, count: globalData.count + 1 });};
// 点击将count-1const decrementCount = () => {setGlobalData({ ...globalData, count: globalData.count - 1 });};return (// 多个方法的话,可以往后继续写<MyContext.Provider value={{ data: globalData, updateMessage, incrementCount, decrementCount }}><ChildComponent /></MyContext.Provider>);
}export default App;
组件内使用
// ChildComponent.jsimport React, {useContext} from 'react';
import MyContext from './MyContext';
import {Button, SafeAreaView, Text, View} from 'react-native';
function ChildComponent() {const {data, updateMessage, incrementCount, decrementCount} = useContext(MyContext);// 修改文字const handleClick = () => {updateMessage('New message from ChildComponent!');};return (<SafeAreaView><View><Text>{data.message}</Text><Text>{data.count}</Text><Button title="点击修改文字" onPress={handleClick}></Button><Button title="点击将count+1" onPress={incrementCount}></Button><Button title="点击将count-1" onPress={decrementCount}></Button></View></SafeAreaView>);
}export default ChildComponent;
效果图
