Я не могу передать метод класса 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 не определено.

1
Deon 17 Фев 2019 в 18:47

2 ответа

Лучший ответ

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

1
Andrew 17 Фев 2019 в 16:47

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

0
Prasun 17 Фев 2019 в 16:46