Question

我正在使用native-base ui工具包，因为它更容易设计组件。我现在面临的问题是必须在网格视图组件的列中显示一些图像。我期望的是这样的输出 https://i.stack.imgur.com/BjlOZ.jpg。但这就是我得到的https://i.stack.imgur.com/JrSiJ.png。以下是我的代码，请看看并为我提供帮助。我尝试给width:"100%" resizeMode:'cover'成像，但似乎无济于事。请帮助。

 import React, { Component } from "react";
import {
  Container,
  Header,
  Title,
  Content,
  Text,
  Button,
  Icon,
  Footer,
  FooterTab,
  Left,
  Right,
  Body
} from "native-base";
import {View,StyleSheet, ScrollView, List, ListItem,Image,TouchableOpacity, AsyncStorage, Alert} from 'react-native';
import { Col, Row, Grid } from "react-native-easy-grid";
import styles from "./styles";


class HomeScreen extends Component {

  componentWillMount(){
    AsyncStorage.getItem('userdetail');
  }
  render() {
    return (
           <Container style={{backgroundColor: "#FFF"}}>
           <Header
           style={{ backgroundColor: "#fff" }}
            androidStatusBarColor="#fff"
            iosBarStyle="light-content"
           >
             <Left>
               <Button
                 transparent
                 onPress={() => this.props.navigation.navigate("DrawerOpen")}
               >
                 <Icon name="menu"  style={{color:"#000"}}/>
               </Button>
             </Left>
             <Body>
              <Image source={require('../../imgs/logo.png')} style={styl.imagebk} />
             </Body>
             <Right />
           </Header>
                <View style={{paddingLeft:8,flex:1,marginBottom:30}}>
                <Grid style={{margin:10}}>
                  <Text style={{marginLeft:12, fontWeight:'bold'}}>Courses</Text>
                   <Row style={{flex:1,marginLeft:8}}>
                   <ScrollView horizontal={true}>
                    <Col style={styl.col2}>
                    <TouchableOpacity onPress ={() => this.props.navigation.navigate("Header")}>

                    <Image source={require('../../imgs/coin.jpg')} style={styl.image} />

                    </TouchableOpacity>

                    </Col>

                    <Col style={styl.col2}>
                     <TouchableOpacity onPress ={() => this.props.navigation.navigate("Footer")}>

                      <Image source={require('../../imgs/file.jpg')} style={styl.image} />

                      </TouchableOpacity>

                    </Col>
                    <Col style={styl.col2}>
                    <TouchableOpacity onPress ={() => this.props.navigation.navigate("NHBadge") }>

                      <Image source={require('../../imgs/economy.jpg')} style={styl.image} />

                      </TouchableOpacity>

                    </Col>

                   </ScrollView>
                  </Row>

                   <Text style={{marginLeft:12, fontWeight:'bold'}}>Test Series</Text>
                    <Row style={{flex:1,marginLeft:8, marginTop:10}}>
                    <ScrollView horizontal={true}>
                     <Col style={styl.col}>
                     <TouchableOpacity onPress ={() => this.props.navigation.navigate("Header")}>
                     <Col style={styl.col2}>
                     <Image source={require('../../imgs/homework.png')} style={styl.image} />

                     </Col>
                     </TouchableOpacity>

                     </Col>

                     <Col style={styl.col}>
                      <TouchableOpacity onPress ={() => this.props.navigation.navigate("Footer")}>
                        <Col style={styl.col2}>
                       <Image source={require('../../imgs/customer-service.png')} style={styl.image} />
                       </Col>
                       </TouchableOpacity>

                     </Col>
                     <Col style={styl.col}>
                     <TouchableOpacity onPress ={() => this.props.navigation.navigate("NHBadge") }>
                       <Col style={styl.col2}>
                       <Image source={require('../../imgs/online-test.png')} style={styl.image} />
                       </Col>
                       </TouchableOpacity>

                     </Col>

                    </ScrollView>

                   </Row>
                  </Grid>
                </View>
            </Container>

    );
  }
}
const styl = StyleSheet.create({
   imagebk:{
     width:240,
     height:50,
        marginBottom:10
    },
     col2:{
       flex:1,
       padding:50,
       backgroundColor:"#ddd",
       alignItems:'center',
       borderRadius:20,
       margin:5,
       height:180,
       width:100

      },
     text:{
       fontSize:15,
       marginTop:10,
       textAlign:'center'
     },
     image:{
       alignItems:'center',
       justifyContent:'center',
       flex:1
 },
});
export default HomeScreen;

Answer 1

我没有使用native-base，而是绘制了适合视图内部的圆圈图像，这可能对您有所帮助。

<View style={{ 
        height: PROFILE_IMAGE_MAX_HEIGHT, 
        width: PROFILE_IMAGE_MAX_HEIGHT,
        borderRadius: PROFILE_IMAGE_MAX_HEIGHT / 2,
        borderWidth: 3,
        borderColor: "#fff",
        overflow: "hidden"
        }}>
        <Image source={require("./assets/profilePic.png")} style={{ flex: 1, height: null, width: null}}></Image>
      </View>

如何在react native中将图像的全部大小放入网格视图的一列中？

1 个答案: