React Native ScreenProps Неопределенная функция

Я не могу передать метод класса screenProps. В AppContainer's screenProps я передаю два реквизита changeModalVisibility и thisKeyValueIsDefined и запускаю console.warn, но в консоли отображается только thisKeyValueIsDefined. Пытаюсь использовать screenProps.changeModalVisibility(true) броски и ошибки Undefined/Not a Function.

import React, { Component } from 'react';
import {
  Button,
  Modal,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {
  createAppContainer,
  createStackNavigator,
} from 'react-navigation';

const Home = ({ navigation, screenProps }) => (
  <SafeAreaView>
    <Button
      title = "Go to modal"
      onPress = {() => console.warn(screenProps)}
    />
  </SafeAreaView>
);

const AppStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
});

const AppContainer = createAppContainer(AppStack);

export default class App extends Component {
  state = {
    modalVisible: false,
  }

  modalChangeVisibility = (modalVisible = false) => {
    this.setState({ modalVisible });
  }

  render() {
    return (
      <View style = {{ flex: 1 }}>
        <AppContainer screenProps = {{ changeModalVisibility: this.changeModalVisibility, thisKeyValueIsDefined: true, }} />
        <Modal visible = {this.state.modalVisible}>
          <SafeAreaView style = {styles.modalContainer}>
            <View style = {styles.modalBody}>
              <Text>
                This modal is just an example.
              </Text>
              <Button
                title = "Close Modal"
                onPress = {() => this.modalChangeVisibility(false)}
              />
            </View>
          </SafeAreaView>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.25)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalBody: {
    backgroundColor: 'white',
    width: '80%',
    padding: 20,
    borderRadius: 5,
  }
});

Ищу уже около 4 часов и не могу найти ни блога, ни статьи о том, почему changeModalVisibility не определено.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
1 605
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

changeModalVisibility функция не определена в классе App.js. Вот почему вы получаете undefined.

Ответ принят как подходящий

Проблема в том, что вы определили свою функцию как modalChangeVisibility в своем компоненте App, за исключением случаев, когда вы установили ее в своем screenProps, вы назвали ее как this.changeModalVisibility.

В следующем коде я обновил имя, и оно работает.

import React, { Component } from 'react';
import {
  Button,
  Modal,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {
  createAppContainer,
  createStackNavigator,
} from 'react-navigation';

const Home = ({ navigation, screenProps }) => (
  <SafeAreaView>
    <Button
      title = "Go to modal"
      onPress = {() => screenProps.changeModalVisibility(true)}
    />
  </SafeAreaView>
);

const AppStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
});

const AppContainer = createAppContainer(AppStack);

export default class App extends Component {
  state = {
    modalVisible: false,
  }

  modalChangeVisibility = (modalVisible = false) => {
    this.setState({ modalVisible });
  }

  render() {
    return (
      <View style = {{ flex: 1 }}>
        <AppContainer screenProps = {{ changeModalVisibility: this.modalChangeVisibility, thisKeyValueIsDefined: true, }} />
        <Modal visible = {this.state.modalVisible}>
          <SafeAreaView style = {styles.modalContainer}>
            <View style = {styles.modalBody}>
              <Text>
                This modal is just an example.
              </Text>
              <Button
                title = "Close Modal"
                onPress = {() => this.modalChangeVisibility(false)}
              />
            </View>
          </SafeAreaView>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.25)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalBody: {
    backgroundColor: 'white',
    width: '80%',
    padding: 20,
    borderRadius: 5,
  }
});

modal displaying

Другие вопросы по теме