Question

我正在尝试制作自己的标签导航，如Instagram的instagram example。我注意到，我在页脚视图中创建的项目不在边界内，而是移至屏幕的左上方。 显示的图像-What I am trying to achieve What happens frequently

这是我的代码中最重要的部分。我暂时做了内联样式以尝试找出问题所在。这是问题所在的部分<View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} <TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}> <Text style = {{justifyContent: 'flex-end'}}> Profile </Text> </TouchableOpacity> </View>-

render（）{ 返回（

<MapView  style = {[style.container, style.map]}
  region = {this.state.initialPosition}>

  <MapView.Marker coordinate = {this.state.markerPosition}> 

  <View style = {style.radius}> 
  <View style = {style.marker}/>
  </View>

  </MapView.Marker>
  <View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} >

  <TouchableOpacity  onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}> 
  <Text style = {{justifyContent: 'flex-end'}}> Profile </Text> 
  </TouchableOpacity>

   </View>
  </MapView>

);

} }

const style = StyleSheet.create（{ 容器： { 弹性：1， justifyContent：'flex-end'， // alignItems：'center'， }

文本：{ 颜色：“＃fff” }

地图：{ 左：0，右：0，上：0，底部：0，位置：“绝对” }

radius:{

  height: 50,
  width: 50,
  borderRadius: 50 / 2,
  overflow: 'hidden',
  backgroundColor: 'rgba(1,213,106,0.3)',
  borderWidth: 1,
  borderColor: 'rgba(1,213,106,0.3)',
  alignItems:'center',
  justifyContent: 'center'
},

marker: {
  height: 20,
  width: 20,
  borderWidth: 3,
  borderColor: '#fff',
  borderRadius: 20 / 2,
  borderWidth: 3,
  overflow: 'hidden',
  backgroundColor: '#01D56A'

},

菜单部分：{ backgroundColor：'rgba（255，255，255，0.7）'，宽度：Dimensions.get（'window'）。width，高度：Dimensions.get（'window'）。height / 3， justifyContent：'flex-end'， alignItems：'中心' }

图标：{ 宽度：50，高度：50， backgroundColor：“黑色” } }）

组件不会包裹在边界内（React Native）

0 个答案: