反应本机导航器自定义按钮onPress

我正在使用react-native-navigation作为我的导航应用程序中，我用左/右按钮选项（静态navigatorButtons）来实现一些按钮在导航栏的每一侧，我可以与onNavigatorEvent（事件）一起使用，并检查哪个被按下event.id反应本机导航器自定义按钮onPress

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

基本上我想显示如果listA的是leftButton按下或数组listB如果rightButton被按下，但不知道如何倾听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> 
      ) 
     } 
    } 
}

来源

2017-10-16 Juan

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

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

来源

2017-10-16 13:55:40

反应本机导航器自定义按钮onPress

回答

相关问题