Question

我觉得我已经尝试了onPress事件和函数调用的所有组合，但是没有任何效果。我太傻了，看不出问题是什么。是因为它包含在一些return语句中了吗？

我省略了不相关的代码。它工作正常，但该按钮似乎无任何作用。没有任何错误。

谢谢

    import React from 'react';
    import {
        ...
        Button,
    } from 'react-native';


    //Import other react maps stuff
    ......

    const dest = {latitude: -37.836037, longitude: 145.036730};

    const waypoint = [
        {address: '123 Fake St, Anglesea', latitude: -37.861738, longitude: 145.002500},
        {address: '321 Real St, Anglesea', latitude: -37.806694, longitude: 145.010026}
    ];

    class TodaysJobs extends React.Component {

        state = {
            location: null,
            errorMessage: null,
        };

        //Get user current location
        componentWillMount() {
            ....
        }

        _getLocationAsync = async () => {
            ....
        };

        moveMap() {
            alert('Simple Button pressed');
            const coordinate = waypoint[0];
            this.map.animateToRegion({
                    latitude: -37.223423,
                    longitude: 145.423442,
                    latitudeDelta: 0.1,
                    longitudeDelta: 0.1
                },
                350
            );
        }


        render() {
            if (this.state.loaded) {
                // if we have an error message show it
                if (this.state.errorMessage) {
                    return (
                        ....
                    );
                } else if (this.state.location) {
                    // if we have a location show it
                    return (
                        <View style={{ flex: 1 }}>
                            <MapView
                                ref={(ref) => { this.mapRef = ref }}
                                style={ styles.mapStyle }
                                region={{
                                    latitude: this.state.location.coords.latitude,
                                    longitude: this.state.location.coords.longitude,
                                    latitudeDelta: 0.1,
                                    longitudeDelta: 0.1
                                }}
                            >

                                {waypoint.map(function(item, i){
                                    return <MapView.Marker
                                        key={i}
                                        coordinate={item}
                                    />
                                })}
                                <MapViewDirections
                                    origin={this.state.location.coords}
                                    waypoints={waypoint}
                                    destination={dest}
                                />
                            </MapView>
                            <ScrollView style={ styles.mapStyle }>
                                {waypoint.map(function(item, i){
                                    return (
                                        <View key={i} style={ styles.houseList }>
                                            <Text>{item.address}</Text>
                                            <Button
                                                title={item.address}
                                                onPress={this.moveMap}
                                            />
                                        </View>
                                    );
                                })}
                            </ScrollView >
                        </View>
                    );
                }
            } else {
                // if we haven't loaded show a waiting placeholder
                return (
                    <View>
                        <Text>Waiting...</Text>
                    </View>
                );
            }
        }
    }

    export default TodaysJobs;

    //Styles
    ....

Answer 1

您正在使用waypoint.map(function(item, i)，然后使用onPress={this.moveMap}。 this是在运行时定义的，因此this.moveMap将是未定义的。尝试使用粗箭头功能代替本机功能。

{ waypoint.map((item, i) => { return ( <View key={i} style={styles.houseList}> <Text>{item.address}</Text> <Button title={item.address} onPress={this.moveMap} /> </View> ); }) }

如果您想了解更多有关差异read this blog

的信息，

简单的React Native按钮无法在onPress上运行

1 个答案: