React Native ScreenProps未定义的函数

Question

我无法将类方法传递给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未定义的博客或文章。

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。