javascript - contentComponent 中未定义的 onClick 函数

Question

我正在尝试访问 createDrawerNavigator 内的 contentComponent 上的按钮内的函数。问题是传递给 contentComponent 的“props”没有我尝试访问的功能，并且我一直得到“未定义”。代码如下:

const MainDrawer = createDrawerNavigator(
  {
    Home: {
    screen: HomeScreen,
  },
  }, {
    contentComponent: (props) => (
      <View style={{ flex: 1 }}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
          <DrawerItems {...props} />
          <Button
            color='red'
            title='Logout'
            onPress={() => { props.logoutCurrentUser() }}
          />
        </SafeAreaView>
      </View>
    ),
})


const RootNavigator = createStackNavigator({
  MainDrawer: { screen: MainDrawer},
})

class AppNavigation extends Component {
  constructor(props) {
    super(props);
  }

  logoutCurrentUser = () => {
    console.log("LOGOUT PRESSED")
  }

  render() {
    return <RootNavigator logoutCurrentUser={this.logoutCurrentUser}/>
  }
}

onPress={() => { props.logoutCurrentUser() }} 是我收到错误的地方。如何正确调用这个函数？

提前致谢。

Answer 1

Prop 基本上是您传递给组件的“参数”，所以假设您有

<Component something="abcd" anotherThing="efg"></Component>

在该组件内，如果您访问 this.props 你会有这个

{
    something: "abcd",
    anotherThing: "efg",
}

这样你就可以执行 this.props.something 或 this.props.anotherThing 并且可以访问这些值。

您也可以在您的方法中执行类似的操作

const { something, anotherThing} = this.props;

console.log(something);
console.log(anotherThing);

所以您的代码的问题在于您没有将 logoutCurrentUser 函数作为 prop 传递。

您需要将其传递给组件

const MainDrawer = createDrawerNavigator(
  {
    Home: {
    screen: HomeScreen,
  },
  }, {
    contentComponent: (props) => (
      <View style={{ flex: 1 }}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
          <DrawerItems {...props} />
          <Button
            color='red'
            title='Logout'
            onPress={() => { props.logoutCurrentUser() }}
          />
        </SafeAreaView>
      </View>
    ),
})

class AppNavigation extends Component {
  constructor(props) {
    super(props);
  }

  logoutCurrentUser = () => {
    console.log("LOGOUT PRESSED")
  }

  render() {
    return <MainDrawer logoutCurrentUser={this.logoutCurrentUser} />
  }
}

如果你想使用 HOC 传递 prop，只需将 prop 传递给 HOC，HOC 就像一个 stacknavigator

const SomeStack = createStackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>