withRouter HOC 实现不正确。 useNavigation 钩子是 RRDv6.4 数据路由器专用钩子。重点是我。

This hook tells you everything you need to know about a page navigation to build pending navigation indicators and optimistic UI on data mutations. Things like:

• Global loading indicators
• Disabling forms while a mutation is happening
• Adding busy indicators to submit buttons
• Optimistically showing a new record while it's being created on the server
• Optimistically showing the new state of a record while it's being updated

Important

This feature only works if using a data router , see Picking a Router

import { useNavigation } from "react-router-dom";

function SomeComponent() {
  const navigation = useNavigation();
  navigation.state;
  navigation.location;
  navigation.formData;
  navigation.formAction;
  navigation.formMethod;
}

useNavigation 钩子不用于发出任何命令式导航操作。为此，您应该导入并使用 useNavigate 钩子，因为这是返回 navigate 函数的钩子。

import { useLocation, useParams, useNavigate } from 'react-router-dom'; 

const withRouter = WrappedComponent => props => {
  const location = useLocation();
  const params = useParams();
  const navigate = useNavigate();
  
  return (
    <WrappedComponent
      {...props}
      {...{ location, params, navigate }}
    />
  );
};

export default withRouter;

React Class 组件中的访问 this.props.navigate 。不要忘记，您想要在路由状态中传递的数据是在 option 对象的 state 属性中传递的。

import { View, FlatList, Text, TouchableOpacity } from 'react-native';
import withRouter from './withRouter';

class Restaurants extends Component {
  ...

  componentDidMount() {
    if (!this.state.restaurantsSet) {
      this.setState({ restaurantsSet: true });
      this.settingRestaurants(this.props.location.state?.station);
    }
  }

  ...

  render() {
    return (
      <View>
        <div className='header'></div>
        <FlatList
          ItemSeparatorComponent={this.FlatListItemSeparator}
          ListHeaderComponent={this.FlatListHeader} 
          style={{ flex: 1 }}
          data={this.state.restaurants}
          renderItem={({ item }) => 
            <TouchableOpacity 
              onPress={() => 
                this.props.navigate(
                  'FoodItems',
                  { state: { message: 'my_message' }}
                );
              }
            >
              <Row {...item} />
            </TouchableOpacity>
          }
        />
      </View>
    )
  }
}

export default withRouter(Restaurants);