javascript - 如何在 native react 中在屏幕中间显示图标

Question

在这里，我在中心显示 "icon="check-decagram"type="MaterialCommunityIcons"，但它刚好位于中心，距离顶部有 20 个填充。我必须在中间显示它手机屏幕。我试过了，可能是我做错了。请指正。

return(
       <ImageBackground source={BG} style={styles.imgBG}>
           <ScrollView>
             <View>
                <Header title={title} icon={icon} navigation={navigation} />
             </View>
             <View style={{ flexDirection: 'column', backgroundColor: '#ffff',}}>
             <View style={{
                       flexDirection:'column', backgroundColor:'#fff',alignItems:'center',paddingTop:20,justifyContent: 'center'}}>
                <IconXL icon="check-decagram" type="MaterialCommunityIcons" style={{ color: 'green' }}/>

             </View>
             <View style={{
                       flexDirection:'row', backgroundColor:'#ffff',padding:20,flexWrap:'wrap'}}>
                <SmallText textColor="grey" text={`v${updateResponse.updateStatusList.currentAppVersion} `}/>
                <SmallText textColor="grey" text={`${updateResponse.updateStatusList.desc}`}/>
             </View>
             </View>

          </ScrollView>

      </ImageBackground>

 )}

//谢谢

Answer 1

尝试在图标的父 View 中添加两个属性 height: '100%' 和 width: '100%',

喜欢，

<View style={{flexDirection:'column',height: '100%',width: '100%',backgroundColor:'#fff',alignItems:'center',paddingTop:2,justifyContent: 'center'}}>
  <IconXL icon="check-decagram" type="MaterialCommunityIcons" style={{ color:'green' }}/>
</View>

希望这对你有用，

祝你好运。