时间戳

首页 > 解决方案 > 如何在本机反应中在屏幕中间显示图标

javascript - 如何在本机反应中在屏幕中间显示图标

问题描述

在这里，我"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>

 )}

// 谢谢

标签： javascriptcssreactjsreact-native

解决方案

尝试再添加两个属性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>

希望这对你有用，

祝你好运。

推荐阅读