Как вызвать функцию в классе React Native из другого модуля

Question

В моем приложении я определил класс A по умолчанию в модуле xyz.js, который отображает страницу в моем стеке навигации.В зависимости от одной из переменных состояния класса A, представленные представления отличаются.Например, если приложение находится в «режиме редактирования», то представление редактирования отображается в дополнение к другим стандартным представлениям, отображаемым, когда приложение не находится в «режиме редактирования».Я не могу понять, как изменить эту переменную состояния из другого модуля abc.js и заставить представления, связанные с экземпляром класса A, перерисовать заново.В моем модуле abc.js я создаю стек навигации и у меня есть обработчик onPress для кнопки touchableHighlight, чтобы перевести приложение в «режим редактирования».В этом обработчике я пытаюсь вызвать функцию «Edit ()» в классе A. Но эта функция, похоже, не вызывается.Возможно, это как-то связано с привязкой, но я не совсем понимаю эту концепцию.

Вот что у меня есть:

Модуль 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>
     );
   }
 }

Итак, как вы можете видеть, есть функция с именем "Edit ()" после конструктора в классе XYZ модуля xyz.js.Эта функция вызывается из модуля abc.js при нажатии кнопки редактирования.Но когда кнопка редактирования нажата, состояние не обновляется, представление предупреждений не отображается, и представления не отображаются повторно.Как правильно вызвать Edit (), чтобы переменная состояния "editMode" обновлялась, а представления повторно отображались?

Answer 1

Если вы хотите следовать шаблону, который вы используете, он должен быть обработан внутри вашего компонента «Мое приложение», который отображается в стековом навигаторе. Вы должны использовать refs Просмотрите следующий пример кода, чтобы узнать, как вызвать функцию редактирования.

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>
    );
  }
}