Реагировать на неопределенную функцию Native ScreenProps

Question

Я не могу передать метод класса screenProps.В AppContainer's screenProps я передаю два реквизита changeModalVisibility & thisKeyValueIsDefined и запускаю console.warn, но в консоли отображается только thisKeyValueIsDefined.Пытался использовать screenProps.changeModalVisibility(true) throws и error 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 не определено.

Answer 1

Проблема в том, что вы определили свою функцию как 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,
  }
});

Answer 2

Функция

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