时间戳

首页 > 解决方案 > contentComponent 中的未定义函数 onClick

javascript - contentComponent 中的未定义函数 onClick

问题描述

我试图访问 createDrawerNavigator 内 contentComponent 上的按钮内的函数。问题是传递给 contentComponent 的“道具”没有我试图访问的功能，而且我不断得到“未定义”。这是代码：

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() }}是我得到错误的地方。如何正确调用此函数？

提前致谢。

标签： javascriptreact-nativereact-native-androidreact-navigation

解决方案

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

<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 函数作为道具传递。

您需要将其传递给组件

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 传递道具，只需将道具传递给 HOC，HOC 就像 stacknavigator

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

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

推荐阅读