Я использую native-base комплект пользовательского интерфейса, так как компоненты проще проектировать. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я должен отображать некоторые изображения в столбце компонента вида сетки.То, что я ожидаю, является выводом как это 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;