React Native Navigator 自定义按钮 onPress

Question

我在应用程序中使用 react-native-navigation 作为我的导航，我使用左/右按钮选项（静态导航器按钮）在导航栏的每一侧实现一些按钮，我可以将它们与 onNavigatorEvent 一起使用（事件）并检查按下了哪个 event.id

那些工作正常，但现在我使用组件（自定义栏）在中间添加了一些自定义按钮。问题是我不知道如何检测这些按钮的 onPress 。 onNavigatorEvent(event) 似乎没有检测到它们并且不确定如何执行此操作。

基本上我想在按下左按钮时显示 listA，或者在按下右按钮时显示 listB 但不知道如何监听 onPress 事件

自定义栏

import stuff needed

export default class TopBar extends Component {
   constructor(props) {
      super(props);

      this.state = {
        leftPressed: true,
        rightPressed: false
      };

      this.leftButton = this.leftButton.bind(this);
      this.rightButton = this.rightButton.bind(this);
   }

   leftButton(){
      this.setState({
         leftPressed: true,
         rightPressed: false
      })
   }

   rightButton(){
      this.setState({
         leftPressed: false,
         rightPressed: true
      })
   }

   render() {
      return (
        <View style={Styles.container}>
           <View style = {[Styles.wrapper, {borderTopLeftRadius: 20, borderBottomLeftRadius: 20}]}>
           <TouchableOpacity style={[Styles.button, {alignSelf: 'flex-start'}]} onPress={ this.leftButton }>
              <Text style={[Styles.text, this.state.leftPressed && Styles.textSelected]}>All Tasks</Text>
           </TouchableOpacity>
           </View>
           <View style = {[Styles.wrapper, {borderTopRightRadius: 20, borderBottomRightRadius: 20}]}>
           <TouchableOpacity style={[Styles.button, {alignSelf: 'flex-start'}]} onPress={ this.rightButton }>
              <Text style={[Styles.text, this.state.rightPressed && Styles.textSelected]}>My Tasks</Text>
           </TouchableOpacity>
           </View>
        </View>
      );
   }
}

主屏幕

import other stuff needed
import TopBar from '../_shared/components/TopBar';

Navigation.registerComponent('task.TopBar', () => TopBar);
class TaskListComponent extends BaseView {
   static navigatorButtons = {
       rightButtons: [
           {
            id: 'Filter',
            icon: require('../_shared/components/Images/tune.png'),
           },
           {
            id: 'Search',
            icon: require('../_shared/components/Images/search.png'),
           }
       ],
       leftButtons: [
           {
            id: 'Create',
            icon: require('../_shared/components/Images/plus.png'),
           },
       ]
   }

   constructor(props) {
       super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
    this.state = {
        tasklist: props.TaskList || null
    };

   onNavigatorEvent(event) {
       if (event.type == 'NavBarButtonPress') {
           if (event.id == 'Create') {
               this.createTask()
           }
           if (event.id == 'Search') {
               this.searchTask()
           }
           if (event.id == 'Filter') {
               this.filterTask()
           }
       }
   }

//code for the left/right buttons goes here

   componentDidMount() {
       this.props.navigator.setStyle({
           navBarCustomView: 'task.TopBar',
           navBarComponentAlignment: 'center',
       });
   }

   render() {
       if (TopBar leftPressed true) { //I know this is wrong just explaining the logic
           return (
               <View>
                   //some stuff
               </View>
           );
       } else {
           return (
               <View>
                   //other stuff
               </View>
           )
       }
   }
}

Answer 1

按下按钮时，调度 DeepLink 并处理屏幕中的 link。您可以静态调度 DeepLink，例如：

Navigation.handleDeepLink({link: 'button1Pressed'});

React Native Navigator 自定义按钮 onPress

React Native Navigator custom button onPress

react-native

react-native-navigation