React Native中如何从A.js向B.js传递状态数据，如title[1]的"DEF"？

Hey there! Let's break down how to get that title[1] value ("DEF") from A.js over to B.js. The right approach depends on how your two components are connected, so I'll cover the most common scenarios you're probably working with:

1. If A.js is a parent component rendering B.js (Direct Parent-Child Relationship) #

This is the simplest case—just use props to pass the value directly.

A.js code example: #

import React from 'react';
import { View } from 'react-native';
import B from './B';

const A = () => {
  const title = ["ABC", "DEF", "GHI"]; // Your target title array

  return (
    <View>
      {/* Pass title[1] as a prop to B */}
      <B passedValue={title[1]} />
    </View>
  );
};

export default A;

B.js code example: #

import React from 'react';
import { Text } from 'react-native';

// Receive the prop and render it
const B = ({ passedValue }) => {
  return <Text>Value from A: {passedValue}</Text>; // Will render "DEF"
};

export default B;

2. If you're navigating from A.js to B.js (Using React Navigation) #

If you're using React Navigation to jump between screens, pass the value as a navigation parameter.

A.js code example (triggering navigation): #

import React from 'react';
import { Button, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const A = () => {
  const navigation = useNavigation();
  const title = ["ABC", "DEF", "GHI"];

  const goToB = () => {
    // Pass title[1] as a parameter when navigating to B
    navigation.navigate('B', { receivedTitle: title[1] });
  };

  return (
    <View>
      <Button title="Go to B" onPress={goToB} />
    </View>
  );
};

export default A;

B.js code example (accessing the parameter): #

import React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const B = () => {
  const route = useRoute();
  // Use optional chaining to avoid errors if the parameter is missing
  const receivedValue = route.params?.receivedTitle || "Fallback Value";

  return <Text>Value from A: {receivedValue}</Text>; // Renders "DEF"
};

export default B;

3. If A.js and B.js are unrelated (No Parent-Child or Navigation Link) #

For components without a direct connection (like siblings or cross-app components), use Context API (built into React) or a state management library like Redux. Here's a quick Context example:

Step 1: Create a Context file (e.g., TitleContext.js) #

import React, { createContext, useState, useContext } from 'react';

// Create the context
const TitleContext = createContext();

// Provider component to wrap your app/relevant sections
export const TitleProvider = ({ children }) => {
  const [selectedTitle, setSelectedTitle] = useState("");

  return (
    <TitleContext.Provider value={{ selectedTitle, setSelectedTitle }}>
      {children}
    </TitleContext.Provider>
  );
};

// Custom hook for easy context access
export const useTitleContext = () => useContext(TitleContext);

Step 2: Wrap your app with the Provider (in App.js) #

import { TitleProvider } from './TitleContext';
// Import your navigation stack or root components

export default function App() {
  return (
    <TitleProvider>
      {/* Your app navigation or root components here */}
    </TitleProvider>
  );
}

Step 3: Update A.js to set the value in Context #

import React from 'react';
import { Button } from 'react-native';
import { useTitleContext } from './TitleContext';

const A = () => {
  const { setSelectedTitle } = useTitleContext();
  const title = ["ABC", "DEF", "GHI"];

  const setValueForB = () => {
    setSelectedTitle(title[1]); // Store "DEF" in context
  };

  return <Button title="Set value for B" onPress={setValueForB} />;
};

export default A;

Step 4: Access the value in B.js from Context #

import React from 'react';
import { Text } from 'react-native';
import { useTitleContext } from './TitleContext';

const B = () => {
  const { selectedTitle } = useTitleContext();

  return <Text>Value from A: {selectedTitle}</Text>; // Renders "DEF" after button press
};

export default B;

Pick the method that fits your component structure best—props for direct parent-child relationships, navigation params for screen jumps, and Context/state management for unrelated components.

内容的提问来源于stack exchange，提问作者user7503333