Wix React-Native-Navigation:用于自定义组件按钮的onPress

时间:2017-11-20 08:55:32

标签: react-native react-native-navigation rightbarbuttonitem onpress wix-react-native-navigation

我按照给定here的示例编写了一个自定义右侧导航按钮。但是,使用自定义组件时似乎不再调用onNavigatorEvent()方法。我甚至尝试将onPress事件作为支持传递给我的自定义组件,但是它作为undefined传递。有什么我想念的吗?

这就是我将onPress道具传递给创建按钮的功能:

Navigation.registerComponent('DoneButton', () => DoneButton);

const DoneButton = ({text, backgroundColor, textColor, onPressAction}) => {
    var containerStyle = [{backgroundColor: backgroundColor, width: 70, height:30, justifyContent:'center', borderRadius:4, shadowColor:'black', shadowOpacity:0.2, shadowRadius:1, shadowOffset:{width:0, height:2}}];            
    return(
        <TouchableOpacity style={containerStyle} onPress={onPressAction}>
            <Text style={[{color:textColor, textAlign: 'center', fontSize:16}]}>
                {text}
            </Text>
        </TouchableOpacity>
    );
}

_renderDoneButton(){
    this.props.navigator.setButtons({
        rightButtons: [
            {
              id:           'Done'
              component:    'DoneButton',
              passProps:    this._DoneButtonProps(),
            }],
    })
}

_DoneButtonProps(){
    return {
        text:               'Done',
        backgroundColor:    'green',
        textColor:          'white',
        onPressAction:      this._doneAction.bind(this)
    }
}

_doneAction(){
    alert('Done');
}

1 个答案:

答案 0 :(得分:2)

从版本1.1.282开始,您可以将不可序列化的道具传递给自定义按钮,因此您传递的onPress方法应该可以正常工作。