React Native + Context API｜在 React Native 中使用 useContext！

use Context API in React Native in 20 lines code.

【前言 Foreword】

這篇簡單，直接上 code!

【Code】

import React, { useState, createContext, useContext } from "react";
import { Text } from "react-native";
const FakeContext = createContext();
const FakeProvider = (props) => {
  const [event, setEvent] = useState({ text: "Hello!", name: "molly" });
return (
    <FakeContext.Provider value={event}>{props.children}</FakeContext.Provider>
  );
};
const App = () => {
  return (
    <FakeProvider>
      <NewStore />
    </FakeProvider>
  );
};
const NewStore = () => {
  const storedEvents = useContext(FakeContext);
  console.log(storedEvents);
  return <Text>{storedEvents.name}</Text>;
};
export default App

簡單說明

首先先建立一個 createContext()

const FakeContext = createContext(); 

建立元件 FakeProvider，FakeContext.Provider 為固定用法，其中 value 就是放我們要傳遞的值，這個範例就是將 event 這個值，利用 context 傳到需要使用的原件。

const FakeProvider = (props) => {
  const [event, setEvent] = useState({ text: "Hello!", name: "molly" });
return (
    <FakeContext.Provider value={event}>{props.children}</FakeContext.Provider>
  );
};

假設我們要在 NewStore 元件中使用到 event，就這樣引用

const NewStore = () => {
  const storedEvents = useContext(FakeContext);
  console.log(storedEvents);
  return <Text>{storedEvents.name}</Text>;
};

最後，在最外層使用 FakeProvider 將元件包起來

const App = () => {
  return (
    <FakeProvider>
      <NewStore />
    </FakeProvider>
  );
};

這篇用很簡單的方式寫 useContext，基本上可以複製貼上後再改成自己需要的元件跟要傳遞的值就可以直接使用 ٩(ˊᗜˋ )و~

2022.09.29 補充範例

import React, {useContext} from 'react';
import {Button, View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {StoreContext, StoreProvider} from './GlobalState/Store';
function HomeScreen({navigation}) {
  const {value, setValue, value1, setValue1, value2, setValue2} =
    useContext(StoreContext);
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
      <Text>{value}</Text>
      <Text>{value1}</Text>
      <Text>{value2}</Text>
      <Button
        title="++++"
        onPress={() => {
          setValue(value + 1);
          setValue1(value1 + 1);
          setValue2(value2 + 1);
        }}
      />
<Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}
function DetailsScreen() {
  const {value, setValue, value1, setValue1, value2, setValue2} =
    useContext(StoreContext);
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen</Text>
      <Text>{value}</Text>
      <Text>{value1}</Text>
      <Text>{value2}</Text>
      <Button
        title="+++"
        onPress={() => {
          setValue(value + 1);
          setValue1(value1 + 1);
          setValue2(value2 + 1);
        }}
      />
    </View>
  );
}
const Stack = createNativeStackNavigator();
function App() {
  return (
    <StoreProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </StoreProvider>
  );
}
export default App;