React Native-使用Google Maps Marker添加向上滑动面板

时间:2019-07-07 12:46:55

标签: typescript react-native

我正在尝试学习如何与React Native一起应用。 我使用了Google地图库(https://github.com/react-native-community/react-native-maps)。

我在地图上添加了标记,但是我希望当您单击标记时,会打开一个面板(例如在Google地图上)。我正在尝试使用此库:https://www.npmjs.com/package/rn-sliding-up-panel

喜欢:https://raw.githubusercontent.com/octopitus/rn-sliding-up-panel/HEAD/demo/sliding_panel.gif

我已经尝试过rn-sliding-up-panel库,但是当我尝试将其放在标记上时,标记不再显示。

我的render():

        return (
            <View style={ styles.container }>
                <MapView
                    style={ styles.map }
                    onRegionChange={this.onRegionChange}
                    initialRegion={{
                        latitude: 45.675584755447034,
                        longitude: 6.391491014510393,
                        latitudeDelta: 0.008059859835661598,
                        longitudeDelta: 0.006943903863430023,
                    }}>
                    <Marker
                        onPress={() => this._panel.show()}
                        title="Test"
                        description="lol"
                        coordinate={{"latitude":  45.673694, "longitude": 6.391551}}
                    >
                        <SlidingUpPanel ref={c => this._panel = c}>
                            <View style={styles.panel}>
                                <Text>Here is the content inside panel</Text>
                                <Button title='Hide' onPress={() => this._panel.hide()} />
                            </View>
                        </SlidingUpPanel>
                    </Marker>

                </MapView>
                {/*this._markerList*/}
            </View>
        );

该库之所以起作用,是因为如果我以他们建议的示例为例,

我没有收到任何错误消息。单击标记时,我只是无法显示面板。

0 个答案:

没有答案