Question

错误：应用加载时，Mapview包装的子组件可能会或可能不会离开父组件。

模拟器： iOS iPhone 6 xCode 10

环境： react-native-cli：2.0.1 反应本机：0.57.0 “ react-native-maps”：“ ^ 0.22.1”，

import React, { Component } from 'react';
import {View, Text, TouchableOpacity} from 'react-native'
import MapView from 'react-native-maps';
import { SearchBar } from 'react-native-elements'
import FontAwesome5 from 'react-native-vector-icons/dist/FontAwesome5'
export default class Search extends Component {
    static navigationOptions = {
        title: 'Search',
        header: null
    };

    constructor(props){
        super(props);
        this.state = {
            region: {
                latitude: 37.78825,
                longitude: -122.4324,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
            },
        }
    }

    onRegionChange(region) {
        this.setState({ region });
    }

    render(){
        return(
            <View style={{flex:1}}>
                <MapView
                    style={{flex: 1}}
                    onRegionChange={(region) => this.onRegionChange(region)}
                    initialRegion={this.state.region}
                >
                    <SearchBar
                        containerStyle={{backgroundColor: 'rgba(0,0,0,0)', borderTopWidth: 0, borderBottomWidth: 0, marginLeft: 10, marginRight: 10}}
                        inputStyle={{backgroundColor: 'white', marginTop: 30}}
                        icon={{type: 'material', color: '#86939e', name: 'search',style:{marginTop: 22, zIndex: 9999999}}}
                        lightTheme
                    />
                    <TouchableOpacity style={{ height: 30, width: 150, backgroundColor:'white', justifyContent: 'center', paddingLeft: 10, paddingRight: 10}}>
                        <Text style={{textAlign: 'center'}}>Current Location</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ height: 30, width: 30, backgroundColor:'blue', justifyContent: 'center'}}>
                        <FontAwesome5 name="location-arrow" size={20} color="white"/>
                    </TouchableOpacity>
                </MapView>
            </View>
        )
    }

}

Answer 1

请关闭。阅读DOCS不会将组件包装在mapview中，而是将其放在下面，并使用绝对值。

react-native-maps带有子组件的Bug会保持移动位置？

1 个答案: