在 React Native 应用程序中，将导航传递给 class 组件将其放在另一个导航对象中

Question

在我的 React Native 应用程序中，当我将 navigation 传递给 class 组件时，它会将其放入另一个 navigation 对象中，现在我必须再添加一个 navigation 调用 navigate() 方法。

所以，而不是 this.props.navigation.navigate("somewhere")，我必须使用 this.props.navigation.navigation.navigate("somewhere")

以下是我如何将 navigation 从功能组件传递到 class 组件：

const ParentComponent = ({ navigation }) => {
   return(
      <View>
          <ChildComponent navigation={navigation} />
      </View>
   );
}

export default ParentComponent;

在恰好是 class 可以访问 Redux 存储的组件的子组件中，我收到 navigation 是这样的：

class ChildComponent extends Component {

   render() {
      return(
         <View>
            <TouchableOpacity onPress={() => this.props.navigation.navigation.navigate("Route123")}>
                <Text>Go to Route 123</Text>
            </TouchableOpacity>
         </View>
      );
   }
}

function mapStateToProps(state, navigation) {
   myAccount: state.account.myAccount,
   navigation: navigation
}

export default connect(mapStateToProps)(ChildComponent);

请注意，在 ChildComponent 中，我必须再添加一个 navigation 才能访问 navigate 函数，即 this.props.navigation.navigation.navigate("Route123");

我想我在某个地方犯了一个相当根本的错误，但不确定在哪里。

我的应用中React Navigation版本如下，React Native版本为0.66.3:

"@react-navigation/drawer": "^6.1.8",
"@react-navigation/material-bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",

Answer 1

如@Hagai Harari 所述，您不应将导航作为 mapStateToProps 函数的第二个参数。如所述here，mapStateProps 的第二个参数采用与组件道具相对应的 ownProps。

您可以使用 withNavigation。但是当我看到你的依赖项时，你正在使用 react-navigation@^6 没有 HOC 称为 withNavigation.

您可以在从 mapStateToProps 中删除不必要的 navigation 参数后选择使用 this.props.navigation。

我的建议是使用功能组件而不是 class 组件，然后您将能够使用 react-navigation@^6 公开的 useNavigation。最后，您将获得导航对象，而无需重复将其向下传递给子组件。

在 React Native 应用程序中，将导航传递给 class 组件将其放在另一个导航对象中

In React Native app passing navigation to class component puts it in another navigation object

react-native

react-navigation