RN实现全局数据共享(非Redux,使用原生内置的方法实现)

下面这个方法是在RN使用全局数据共享的,使用原生React的方式搞得,相对于Redux配置相对简单,适合小型项目

项目内创建MyContext.js

// MyContext.js

import React from 'react';

const MyContext = React.createContext();

export default MyContext;
1
2
3
4
5
6
7

App.js引入

// App.js

import 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+1
  const incrementCount = () => {
    setGlobalData({ ...globalData, count: globalData.count + 1 });
  };
// 点击将count-1
  const decrementCount = () => {
    setGlobalData({ ...globalData, count: globalData.count - 1 });
  };

  return (
    // 多个方法的话,可以往后继续写
    <MyContext.Provider value={{ data: globalData, updateMessage, incrementCount, decrementCount }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

组件内使用

// ChildComponent.js

import 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果图