访问navigationOptions中的类方法

时间:2018-02-12 05:47:29

标签: reactjs react-native react-navigation

我在课堂上有一个方法,当我按导航选项中的按钮时,我需要访问该方法。

我在GitHub反应原生问题后遵循了这种方法。 Github

static navigationOptions = ({ navigation }) => ({
    title: i18n.t('viewben'),
    header: ({ state }) => ({
        right: <View style={{ flexDirection: 'row', justifyContent: 'center' }}>

            <TouchableHighlight onPress={() => {
                navigation.navigate('home');
            }}>
                <Image style={{ marginRight: 20 }} source={require('../../../resources/toolbar/home_white.png')} />
            </TouchableHighlight>
            <TouchableHighlight >
                <Image style={{ marginRight: 10 }} source={require('../../../resources/toolbar/edit_white.png')} />
            </TouchableHighlight>
            <TouchableHighlight onPress={state.params.handleDelete()}>
                <Image style={{ marginRight: 10 }} source={require('../../../resources/toolbar/delete_white.png')} />
            </TouchableHighlight>
        </View>,

    }),
    headerTintColor: 'white',
    headerStyle: {
        backgroundColor: colors.themeColor,
        //  top: 30
    }
});



_deleteBen() {

    Alert.alert(i18N.t('delBen'), i18N.t('sureben'), [
        {
            text: i18N.t('confirm'), onPress: () => {



            }
        },
        { text: i18N.t('canc'), onPress: () => { }, style: 'cancel' },

    ], { cancelable: false });
};



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

呈现代码

render() {
    return (
        <View style={styles.mainWrapper} >
            <ScrollView>
                <Text style={styles.headerText}>{i18n.t('bendetails')} </Text>
                {/* <Text style={styles.headerAccNo}>{this.state.stViewAccountNo}</Text> */}
                <FlatList style={styles.flatList} data={this.state.stAccntDetail} renderItem={this._renderList} />

                <View style={styles.emptyContainer}>
                </View>

            </ScrollView>
            <TouchableOpacity  >
                <Image style={{ marginTop: 10, height: 50, alignSelf: 'center', marginRight: 10 }} source={require('../../../resources/toolbar/edit_white.png')} />
                <Text >edit</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this._deleteBen()} >
                <Text >delete</Text>
                <Image style={{ marginTop: 10, height: 50, alignSelf: 'center', marginRight: 10 }} source={require('../../../resources/toolbar/delete_white.png')} />
            </TouchableOpacity>
        </View>
    );
}

}

我收到的错误就像无法访问未定义的'Params'一样。请让我知道我哪里出错了。我也包含了渲染代码。

1 个答案:

答案 0 :(得分:0)

这是因为您在handleDelete

中的运行时调用了navigationOptions

make和箭头功能,如下所示:

<TouchableHighlight
  onPress={() => state.params.handleDelete()}
>

此外,您应该将_deleteBen方法与this上下文绑定。

componentDidMount() {
    this.props.navigation.setParams({
        handleDelete: this._deleteBen.bind(this)
    });
}