React Native Navigator 自定义按钮 onPress.

Question

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

这些工作正常，但现在我使用组件（自定义栏）在中间添加了一些自定义按钮。问题是我不知道如何检测按下这些按钮。onNavigatorEvent（event） 似乎没有检测到它们，也不确定如何做到这一点。

基本上，如果按下左按钮，我想显示列表A，如果按下右按钮，则显示列表B，但不知道如何收听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

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

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