Question

在我的应用程序中，我在模块xyz.js中定义了默认类A，该类在导航堆栈上呈现页面。根据A类的状态变量之一，呈现的视图不同。例如，如果将应用程序置于“编辑模式”，则除了在应用程序不处于“编辑模式”时呈现的其他标准视图之外，还将呈现编辑视图。我无法弄清楚如何从另一个模块abc.js更改该状态变量，并导致与实例化的类A相关联的视图重新呈现。在我的模块abc.js中，创建了导航堆栈，并为touchableHighlight按钮提供了一个onPress处理程序，以将应用程序置于“编辑模式”。在该处理程序中，我尝试在类A中调用函数“ Edit（）”。但是似乎未调用该函数。它可能与绑定有关，但是我完全不了解该概念。

这是我所拥有的：

模块abc.js：

import XYZ from './xyz';
import {Edit} from './xyz';
import { pencilEditButton } from './Images';

const App = createStackNavigator(
{
    Home: {
        screen: My App,

        navigationOptions: ({ navigation }) => ({
            title: 'myApp',

            headerRight: (
            <View>
                <TouchableHighlight
                    onPress={() => Edit()}
                    underlayColor="gray">
                    <View>
                        <Image source={pencilEditButton} style={styles.navigationButtonImage} />
                    </View>
                </TouchableHighlight>
            </View>
            ),
        }),
    },
}
);

export default createAppContainer(App);

模块xyz.js：

export default class XYZ extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        editMode: false,    
    };
  };


  // Create a method to handle the press of the edit button on the navigation bar
  Edit() {
    console.log("editMode: ", editMode);
    this.setstate({ editMode: true });
    console.log("editMode: ", editMode);
    alert('User wants to edit a mix!');
  };

render() {
  return (
        <View style={styles.container}>
           { this.state.editMode === true ?
             <TouchableHighlight 
                    onPress={this._onXPressed} 
                    underlayColor="white">
                <View style={[styles.flowRight, styles.controlButton]}>
                    <Text style={styles.buttonText}>{'Edit Mode'}</Text>
                </View>
            </TouchableHighlight>
             :

             <TouchableHighlight 
                    onPress={this._onYPressed} 
                    underlayColor="white">
                <View style={[styles.flowRight, styles.controlButton]}>
                    <Text style={styles.buttonText}>{'Non Edit Mode'}</Text>
                </View>
            </TouchableHighlight>
           }
        </View>
     );
   }
 }

因此，您可以看到，模块xyz.js的XYZ类中的构造函数之后有一个名为“ Edit（）”的函数。按下编辑按钮时，将从模块abc.js中调用此函数。但是，当按下编辑按钮时，状态不会更新，不会显示警报视图，并且不会重新渲染视图。如何正确调用Edit（）以便更新状态变量“ editMode”并重新呈现视图？

Answer 1

如果要遵循所使用的模式，则需要将其作为“我的应用”组件中的句柄，该组件将在堆栈导航器中呈现。您必须使用refs 通过下面的代码示例，了解如何调用Edit函数。

import XYZ from './xyz';

export default class MyApp extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'myApp',
    headerRight: navigation.state.params && navigation.state.params.edit ? (
      <View>
        <TouchableHighlight
          onPress={() => navigation.state.params.edit()}
          underlayColor="gray"
        >
          <View>
            <Image source={pencilEditButton} style={styles.navigationButtonImage} />
          </View>
        </TouchableHighlight>
      </View>
    ) : null,
  })

  constructor(props) {
    super(props);
    this.onEdit = this.onEdit.bind(this);
  }

  componentDidMount() {
    this.props.navigation.setParams({ edit: this.onEdit });
  }

  onEdit() {
    if (this.xyz_Ref) {
      this.xyz_Ref.Edit();
    }
  }

  render() {
    return (
      <View>
        <XYZ ref={ref => this.xyz_Ref = ref} />
      </View>
    );
  }
}

如何从其他模块调用React Native类中的函数

1 个答案: