React Native 组件间通信方式详解

在 React Native 开发中，组件间通信是核心概念之一。以下是几种主要的组件通信方式及其适用场景：

简单父子通信：使用 props 和回调函数
兄弟组件通信：提升状态到共同父组件
跨多级组件：使用 Context API
全局状态管理：Redux/MobX
完全解耦组件：事件总线
命令式操作：Refs
页面间通信：路由参数

1. 父组件向子组件通信（Props 向下传递）

最基本的通信方式，通过 props 传递数据和回调函数。

// 父组件
function ParentComponent() {const [message, setMessage] = useState('Hello from Parent');return <ChildComponent greeting={message} />;
}// 子组件
function ChildComponent({greeting}) {return <Text>{greeting}</Text>;
}

特点：

单向数据流
简单直接
适用于层级不深的组件结构

2. 子组件向父组件通信（回调函数）

通过 props 传递回调函数，子组件调用该函数与父组件通信。

// 父组件
function ParentComponent() {const handleChildEvent = (data) => {console.log('Data from child:', data);};return <ChildComponent onEvent={handleChildEvent} />;
}// 子组件
function ChildComponent({onEvent}) {return (<Button title="Send to Parent" onPress={() => onEvent('Child data')} />);
}

3. 兄弟组件通信（通过共同父组件）

function Parent() {const [sharedData, setSharedData] = useState('');return (<><SiblingA onUpdate={setSharedData} /><SiblingB data={sharedData} /></>);
}function SiblingA({onUpdate}) {return <Button title="Update" onPress={() => onUpdate('New data')} />;
}function SiblingB({data}) {return <Text>{data}</Text>;
}

4. Context API（跨层级通信）

适用于深层嵌套组件或全局状态共享。

const MyContext = React.createContext();function App() {const [value, setValue] = useState('Default');return (<MyContext.Provider value={{value, setValue}}><ParentComponent /></MyContext.Provider>);
}function ChildComponent() {const {value, setValue} = useContext(MyContext);return (<Button title="Change Value" onPress={() => setValue('Updated')} />);
}

5. 事件总线（Event Emitter）

适用于完全解耦的组件通信。

// 创建事件总线
const EventBus = new NativeEventEmitter();// 发送端组件
function Publisher() {const emitEvent = () => {EventBus.emit('customEvent', {data: 'Event data'});};return <Button title="Emit Event" onPress={emitEvent} />;
}// 接收端组件
function Subscriber() {const [message, setMessage] = useState('');useEffect(() => {const subscription = EventBus.addListener('customEvent', (event) => {setMessage(event.data);});return () => subscription.remove();}, []);return <Text>{message}</Text>;
}

6. Redux 或 MobX（状态管理库）

适用于大型应用中的复杂状态管理。

// Redux 示例
import { useSelector, useDispatch } from 'react-redux';function ComponentA() {const dispatch = useDispatch();const updateData = () => {dispatch({ type: 'UPDATE', payload: 'New data' });};return <Button title="Update Store" onPress={updateData} />;
}function ComponentB() {const data = useSelector(state => state.data);return <Text>{data}</Text>;
}

7. Refs（访问组件实例）

用于命令式地访问子组件。

function ParentComponent() {const childRef = useRef(null);const callChildMethod = () => {childRef.current.doSomething();};return (<><ChildComponent ref={childRef} /><Button title="Call Child Method" onPress={callChildMethod} /></>);
}// 需要使用 forwardRef
const ChildComponent = forwardRef((props, ref) => {useImperativeHandle(ref, () => ({doSomething: () => {console.log('Method called from parent');}}));return <Text>Child Component</Text>;
});

8. 路由参数（页面间通信）

使用 React Navigation 等路由库传递参数。

// 发送页面
function HomeScreen({ navigation }) {return (<Buttontitle="Go to Details"onPress={() => navigation.navigate('Details', { itemId: 86 })}/>);
}// 接收页面
function DetailsScreen({ route }) {const { itemId } = route.params;return <Text>Item ID: {itemId}</Text>;
}