React native React本机组件在重新渲染时消失

我的应用程序有一个六边形的主屏幕。由于flex不能很好地处理对角线对齐，我使用transform道具手动将六边形移动到对齐位置。但是，当应用程序重新渲染时，六边形似乎会消失并随机重新出现。通常需要~8次渲染，然后六边形将神奇地重新出现

编辑：仍然可以按下不可见的六边形，当用户导航回主屏幕时，所有六边形都可见

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Dimensions, TouchableOpacity } from 'react-native';

class Home extends Component {
    constructor(props){
      super(props);
    }
    render() {
      return (

          <View style={style.columnHexView}>
          <View>
              <TouchableOpacity 
                activeOpacity = {.5} 
                style={style.HexOpacity}
              >
                <Image style={style.Hex}source={require('./images/logo.png')} />
              </TouchableOpacity>
            </View>
          <View>
              <TouchableOpacity 
                activeOpacity = {.5} 
                style={style.HexOpacity}
              >
                <Image style={style.Hex}source={require('./images/emptyhex.png')}/>
              </TouchableOpacity>
            </View>
            <View style={{transform:([
              {translateY:(Dimensions.get('window').height/10)*-2.5},
              {translateX:(Dimensions.get('window').height/10)*-.84}
            ])}}>
              <TouchableOpacity 
                activeOpacity = {.5}  
                style={style.HexOpacity}
                onPress={() => this.props.navigation.navigate("documentList")}
              >
                <Image style={style.Hex}source={require('./images/documenthex.png')} />
              </TouchableOpacity>
            </View>
            <View style={{transform:([
              {translateY:(Dimensions.get('window').height/10)*-3.5},
              {translateX:(Dimensions.get('window').height/10)*.84}
            ])}}>
              <TouchableOpacity 
                activeOpacity = {.5} 
                style={style.HexOpacity}
                onPress={() => this.props.navigation.navigate("Settings")} 
              >
                <Image style={style.Hex}source={require('./images/cog.png')} />
              </TouchableOpacity>
            </View>
            <View style={{transform:([
              {translateY:(Dimensions.get('window').height/10)*-5}
            ])}}>
              <TouchableOpacity 
                activeOpacity = {.5} 
                style={style.HexOpacity}
                onPress={() => this.props.navigation.navigate("ToDo")}
              >
                <Image style={style.Hex}source={require('./images/todohex.png')}/>
              </TouchableOpacity>
            </View>
            <View style={{transform:([
              {translateY:(Dimensions.get('window').height/10)*-4.5},
              {translateX:(Dimensions.get('window').height/10)*.84}
            ])}}>
              <TouchableOpacity 
                activeOpacity = {.5} 
                style={style.HexOpacity}
              >
                <Image style={style.Hex}source={require('./images/emptyhex.png')}/>
              </TouchableOpacity>
            </View>
            <View style={{transform:([
              {translateY:(Dimensions.get('window').height/10)*-5.5},
              {translateX:(Dimensions.get('window').height/10)*-.84}
            ])}}>
              <TouchableOpacity 
                activeOpacity = {.5} 
                style={style.HexOpacity}
              >
                <Image style={style.Hex}source={require('./images/emptyhex.png')}/>
              </TouchableOpacity>
            </View>
          </View>
      );
    }
}

const style = StyleSheet.create({
  columnHolder: {
    flex: 0,
    height: Dimensions.get('screen').height,
    width: Dimensions.get('screen').width,
    backgroundColor: '#424242',
    flexDirection: 'row',

  },
  columnHexView: {
    backgroundColor:'#424242',
    alignItems: "center",
    justifyContent: 'center',
    flex: 1,
  },
  Hex: {
    aspectRatio: 100/85,
    maxHeight: Dimensions.get('window').height/10,
    resizeMode: 'contain',
    flexDirection: 'column',
    flex: 0,
    flexWrap: 'wrap'
  },
  hexHold:{

  },
  HexOpacity: {
    justifyContent: 'center',
    resizeMode: 'stretch',
    display: 'flex',
    maxHeight: Dimensions.get('window').height/5
  }
}
)

export default Home

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、图像、维度、TouchableOpacity}；
类Home扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
this.props.navigation.navigate（“documentList”）}
>
this.props.navigation.navigate（“设置”）}
>
this.props.navigation.navigate（“ToDo”）}
>
);
}
}
const style=StyleSheet.create({
专栏作家：{
弹性：0，
高度：尺寸。获取（“屏幕”）。高度，
宽度：尺寸。获取（'screen'）。宽度，
背景颜色：“#424242”，
flexDirection:'行'，
},
columnHexView：{
背景颜色：“#424242”，
对齐项目：“中心”，
为内容辩护：“中心”，
弹性：1，
},
十六进制：{
方面：100/85，
maxHeight:Dimensions.get（'window'）。高度/10，
resizeMode:'包含'，
flexDirection:'列'，
弹性：0，
flexWrap:“wrap”
},
hexHold：{
},
不透明度：{
为内容辩护：“中心”，
resizeMode:'拉伸'，
显示：“flex”，
maxHeight:Dimensions.get（'window'）。高度/5
}
}
)
导出默认主页

如果有人看到这一点，解决方案是使用封面大小调整模式，而不是包含。我怀疑它只是渲染了一些六边形，因为六边形之间有轻微的重叠。

在中添加代码片段question@MuhammadIqbal添加了代码，对不起！