Неопределенная функция onClick в contentComponent - PullRequest
Новая
       6

Неопределенная функция onClick в contentComponent

0 голосов
/ 22 ноября 2018

Я пытаюсь получить доступ к функции внутри кнопки на contentComponent, который находится внутри createDrawerNavigator.Проблема в том, что «реквизиты», переданные в contentComponent, не имеют функции, к которой я пытаюсь получить доступ, и я продолжаю получать «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 ()}} , где я получаю сообщение об ошибке.Как правильно вызвать эту функцию?

Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 22 ноября 2018

Пропорции - это в основном "аргументы", которые вы передаете компоненту, поэтому предположим, что у вас есть 

<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, например, стекавигатор 

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

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
0 голосов
/ 22 ноября 2018

Итак, я справился с обходным решением, я добавил mapDispatchToProps с функцией, которую я хочу вызывать при нажатии кнопки: 

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

Затем в моем классе 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>
  ),
})

Оставив здесь ответ на случай, если у кого-то еще будет такая же проблема.

0 голосов
/ 22 ноября 2018 
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}/>
  }
}
...