[英]CheckBoxes React Native Map function returns error: Too many re-renders. React limits the number of renders to prevent an infinite loop
[英]React Native Map Renders On Top Of Everything
我正在使用 react-native-maps 開發一個小地圖應用程序。 我正在嘗試在地圖頂部渲染一個浮動操作按鈕,但是雖然我確實看到它閃爍了一秒鍾,但一旦地圖渲染,它就位於按鈕的正上方。 我將在下面粘貼我的渲染代碼和樣式:
render() {
return (
<View style={{flex:1, backgroundColor: '#f3f3f3'}}>
<MapView ref="map" mapType="terrain" style={styles.map} region={this.state.region} onRegionChange={this.onRegionChange}>
<MapView.Marker coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}>
<View style={styles.radius}>
<View style={styles.marker} />
</View>
</MapView.Marker>
</MapView>
<ActionButton buttonColor="rgba(231,76,60,1)" style={styles.actionButton}>
<ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
width: width,
height: height,
zIndex: 998
},
radius: {
height: 50,
width: 50,
borderRadius: 50 / 2,
overflow: 'hidden',
backgroundColor: 'rgba(0, 122, 255, 0.1)',
borderWidth: 1,
borderColor: 'rgba(0, 122, 255, 0.3)',
alignItems: 'center',
justifyContent: 'center'
},
marker: {
height: 20,
width: 20,
borderWidth: 3,
borderColor: 'white',
borderRadius: 20 / 2,
overflow: 'hidden',
backgroundColor: '#007AFF'
},
actionButton: {
position: 'absolute',
width: 20,
height: 20,
top: 10,
left: 10,
zIndex: 999
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white'
}
});
我有同樣的問題。 我通過給地圖一個負的 z-index 來解決它。
另外,我使用了flex: 1,
而不是寬度和高度,但這應該沒有區別。
喜歡:
map: {
width: width,
height: height,
zIndex: -1
},
actionButton: {
position: 'absolute',
width: 20,
height: 20,
top: 10,
left: 10,
zIndex: 10
},
這是一個長鏡頭,但嘗試添加position: 'absolute'
到您的地圖樣式並設置其坐標,看看會發生什么
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.