如何从React Navigation导航参数设置组件初始状态？

Great question! You're right that the static navigationOptions method can't access your component instance, so calling this.setState() there isn't possible. Instead, you'll want to grab the navigation params in your component's lifecycle methods (for class components) or using hooks (for function components) to initialize your state.

For Class Components #

Use the componentDidMount lifecycle hook to fetch the params from this.props.navigation.state.params and set your initial state:

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

class DetailsScreen extends React.Component {
  // Initialize empty state first
  state = {
    itemId: null,
    itemTitle: ''
  };

  componentDidMount() {
    // Extract params from navigation state
    const { id, title } = this.props.navigation.state.params;
    
    // Update state with the received params
    this.setState({
      itemId: id,
      itemTitle: title
    });
  }

  // You can still use navigationOptions for config like screen title
  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return {
      title: params?.title || 'Details' // Fallback to default title if params are missing
    };
  };

  render() {
    const { itemId, itemTitle } = this.state;
    return (
      <View>
        <Text>Item ID: {itemId}</Text>
        <Text>Item Title: {itemTitle}</Text>
      </View>
    );
  }
}

export default DetailsScreen;

For Function Components (React Navigation v5+) #

Use the useRoute hook to access params, and useEffect to set your state when the component mounts or params change:

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';

function DetailsScreen() {
  const route = useRoute();
  const navigation = useNavigation();
  
  // Initialize state
  const [itemId, setItemId] = useState(null);
  const [itemTitle, setItemTitle] = useState('');

  useEffect(() => {
    // Get params from route object
    const { id, title } = route.params;
    
    // Update state
    setItemId(id);
    setItemTitle(title);

    // Optional: Update navigation options dynamically (instead of static navigationOptions)
    navigation.setOptions({
      title: title || 'Details'
    });
  }, [route.params, navigation]); // Re-run effect if params or navigation change

  return (
    <View>
      <Text>Item ID: {itemId}</Text>
      <Text>Item Title: {itemTitle}</Text>
    </View>
  );
}

export default DetailsScreen;

Key Notes: #

• Static navigationOptions is meant for configuring navigation bar settings (like titles, buttons) rather than component state.
• For class components, componentDidMount is the right place to fetch params and initialize state because it runs after the component mounts.
• For function components, useEffect with route.params as a dependency ensures your state updates if params change (e.g., if you navigate back and forth with different params).

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