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的原因。

反应本机ScreenProps未定义函数

2 个答案: