Question

我的应用程序有一个由六边形组成的主屏幕。由于flex无法很好地处理对角线对齐，因此我使用了转换道具将六边形手动移动到对齐状态。但是，当重新渲染该应用程序时，六边形似乎消失并随机出现。通常需要大约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

Answer 1

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

React Native组件在重新渲染时消失

1 个答案: