反应本地地图呈现在万物之上

我正在使用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' 
    } 
});

来源

2017-03-20 TheApeMachine

怎么样这个问题的屏幕截图？很难知道你的意思是“在闪光之后它位于按钮之上”。 –

不幸的是，要在屏幕上瞬间闪烁一些东西的截图真的很难，但有人提出了正确的答案虽然，所以感谢您的时间:) – TheApeMachine

我有同样的问题会发生什么。我通过给地图一个负指数z来解决问题。
此外，我用flex: 1,而不是宽度和高度，但这不应该有所作为。

像：

map: { 
    width: width, 
    height: height, 
    zIndex: -1 
    }, 
    actionButton: { 
    position: 'absolute', 
    width: 20, 
    height: 20, 
    top: 10, 
    left: 10, 
    zIndex: 10 
    },

来源

2017-03-21 00:17:55

谢谢！负zIndex正是需要解决这个问题。 – TheApeMachine

这是一个长镜头，但尝试添加position: 'absolute'到地图的样式并设置其坐标和看

来源

2017-03-20 17:11:54 nehvaleem

我曾试过，亚当帕特森的答案是修复:)谢谢。 – TheApeMachine

反应本地地图呈现在万物之上

回答

相关问题