如何从静态导航选项 react-native 中的按钮设置状态？

Question

我想点击 TouchableOpacity 并将状态设置为 true 以便打开。我收到错误。以及如何将 header 处的按钮居中对齐？ alignSelf 无效。

`

import React, {Component} from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  TouchableOpacity,
  Text,
} from 'react-native';
import Menu from '../../src/components/menubar';

export default class SearchPage extends Component {
  constructor(props) {
    super(props);
    this.state = {isMenubarDisplayed: false};
  }

  static navigationOptions = {
    headerTitle: () => {
      return (
        <TouchableOpacity
             onPress={()=> this.setState({isMenubarDisplayed: true})}>
            <Icon name="search" size={20} color="#000" />
        </TouchableOpacity>
      );
    },
    headerTitleStyle: {
      alignSelf: 'center',
      flex: 1,
    },
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>

        {this.state.isMenubarDisplayed ? (
          <Menu />
        ) : null}

      </SafeAreaView>
    );
  }
}`

Answer 1

这就是您所需要的https://reactnavigation.org/docs/en/header-buttons.html#header-interaction-with-its-screen-component

static navigationOptions = ({ navigation }) => {
  return {
    headerTitle: () => {
      return (
        <View style={{ flex: 1, alignItems: 'center' }}>
          <TouchableOpacity onPress={navigation.getParam('toggleMenu')}>
            <Icon name="search" size={20} color="#000" /> 
          </TouchableOpacity>
        </View>
      );
    },
  };
};

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

toggleMenu = () => {
  this.setState({isMenubarDisplayed: true});
}

Answer 2

你需要试试这个，expo-snack。

这是我下面的 search.js 代码，

import * as React from 'react';
import { Text, View, StyleSheet,TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import Menu from './menu';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class Search extends React.Component {

  constructor(props){
    super(props);
    this.state={
      isMenubarDisplayed: false,
    }
  }

 static navigationOptions = ({ navigation }) => {
  return {
    headerTitle: () => {
      return (
        <TouchableOpacity onPress={navigation.getParam('toggleMenu')}>
          <Icon name="search" size={20} color="#000" />
        </TouchableOpacity>
      );
    },
  };
};


toggleMenu = () => {
  this.setState({ isMenubarDisplayed: !this.state.isMenubarDisplayed})
}



  renderMenu = () => (
    <Menu />
  )

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

  render() {
    return (
      <View style={styles.container}>
      {this.state.isMenubarDisplayed?this.renderMenu():<View></View>}

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

希望对您有所帮助。有疑问请随意。

如何从静态导航选项 react-native 中的按钮设置状态？

How to set the state from a button inside static navigationoption react-native?

reactjs

react-native

react-native-android