Как отправить значение с реагирующей навигацией в статическом поле?

Question

У меня есть экран с заголовком <Switch />, используя react navigation.

Я знаю, как получить this.state значение извне функции с помощью this.props.navigation.setParams.

Но я не знаю, как отправить значение <Switch /> во внешнюю функцию.

пробую с кодом onValueChange={value => params.handleThis(value)}

но в моем случае handleThis - это key-value, очевидно, он не может получить значение.

this.props.navigation.setParams({ handleThis: this.changeSwitch });

Как отправить <Switch /> значение onChange во внешнюю функцию?

Вот мой код:

      static navigationOptions = ({ navigation }) => {
        const { params = {} } = navigation.state;
        return {
          title: 'Title',
          headerStyle: {
            backgroundColor: ColorSetting.headerColor,
            elevation: null,
          },
          headerTitleStyle: {
            fontWeight: '300',
            fontFamily: 'FFF Tusj',
            fontSize: 18
          },
          headerRight:
            <View style={{ marginRight: 15 }}>
              <Switch
                onValueChange={value => params.handleThis()}
                value={params.switchOn}
                onTintColor='#444444'
                tintColor='#444444'
              />
            </View>,
        };
      };

      constructor(props) {
        super(props);

        this.state = {
          switchOn: false
        };
      }

      componentDidMount() {
        this.props.navigation.setParams({
          handleThis: this.changeSwitch
        });
      }

  changeSwitch = () => {
    const { switchOn, titleVersion } = this.state;

    this.props.navigation.setParams({ switchOn: !switchOn });
    this.setState({ switchOn: !switchOn });
  }

Любая помощь будет принята с благодарностью. Заранее спасибо.

Answer 1

Вы можете использовать params.handleThis в качестве обработчика, нет необходимости в встроенной функции.

static navigationOptions = ({ navigation }) => {
  const { params = {} } = navigation.state;
  return {
    title: 'SO Question',
    headerStyle: {
      elevation: null,
    },
    headerTitleStyle: {
      fontFamily: 'FFF Tusj',
      fontSize: 18
    },
    headerRight:
      <View style={{ marginRight: 15 }}>
        <Switch
          onValueChange={params.handleThis}
          value={params.switchOn}
          onTintColor='#444444'
          tintColor='#444444'
        />
      </View>,
  };
};

после этого changeSwitch получит новое значение в качестве первого параметра.

changeSwitch = (switchOn) => {   
  this.props.navigation.setParams({ switchOn });
  this.setState({ switchOn });
}

Вот рабочий пример