Question

我正在尝试访问createDrawerNavigator内部的contentComponent上的按钮内的函数。问题是传递给contentComponent的“ props”不具有我试图访问的功能，而且我一直在获取“ undefined”。这是代码：

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

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

<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，那么就可以像将stacknavigator传递给HOC

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

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

Answer 2

class AppNavigation extends Component {
  constructor(props) {
    super(props);
    this.logoutCurrentUser = this.logoutCurrentUser.bind(this);
  }

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

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

Answer 3

因此，我设法解决了这一问题，我添加了mapDispatchToProps并带有单击按钮时要调用的函数：

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch,
    logoutCurrentUser: () => {
      console.log("LOGOUT PRESSED")
    }
  }
}

然后在我的 Class AppNavigation 上，我这样做了：

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

还有我的 MainDrawer ，我改成了这个

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.screenProps.logoutCurrentUser() }}
        />
      </SafeAreaView>
    </View>
  ),
})

如果其他人也有同样的问题，请在这里留下答案。

contentComponent中的未定义函数onClick

3 个答案: