我正在 react-native 上创建一个应用程序，但 android 和 ios 中的视图看起来不同。视图在 android 上很好，但在 ios 上它们看起来不同。您能否查看示例组件并让我知道我在哪里做错了，或者如何使两个视图保持一致？
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
View,
ListView,
TouchableOpacity,
Dimensions,
ScrollView,
ActivityIndicator,
AsyncStorage
} from 'react-native';
import Api from '../lib/api.js';
import { NavigationActions } from 'react-navigation';
import {Column as Col, Row} from 'react-native-flexbox-grid';
const { width, height } = Dimensions.get('window');
const photos= [{uri: 'https://portal.lancercorp.com/Content/Images/missing.png'}];
const tasks =[];
export default class CategoryDetailScreen extends React.Component {
constructor(props){
super(props)
this._onScroll = this._onScroll.bind(this)
this._statusStyle = this._statusStyle.bind(this)
this._renderImage = this._renderImage.bind(this)
this.categoryDetail(this.props.navigation.state.params.id);
this.state = {
totalPictures: photos.length,
value: 1,
name: '',
photos: photos,
location: '',
tasks : tasks
}
}
static navigationOptions = {
title: '',
headerStyle: {
backgroundColor: '#544849',
},
tintColor: 'transparent',
header: null,
headerLeft: <TouchableOpacity><Image source={require('../../img/close.png')} style={{marginTop: 10, marginLeft:10}} /></TouchableOpacity>
};
_onScroll(e){
var contentOffset = e.nativeEvent.contentOffset.x;
this.setState(previousState => {
return { value: ((contentOffset/width)+1).toFixed(0)};
});
}
_statusStyle(status){
if(status == 'Completed'){
return {fontSize: 14, color: '#7da61d',fontWeight: 'bold'};
}
else if(status == 'InComplete'){
return {fontSize: 14, color: 'orange',fontWeight: 'bold'}
}
}
_renderImage(status){
if(status == 'Completed'){
return (
<Image source={require('../../img/ic-check-circle-24px.png')} />
);
}
else if(status == 'InComplete'){
return null;
}
}
categoryDetail(data) {
// let current_user = await AsyncStorage.getItem('current_user');
let current_user = AsyncStorage.getItem('current_user', async(error, result) => {
result = JSON.parse(result);
let headers = {
"access-token": result["access-token"],
"client": result["client"],
"uid": result["uid"],
"token-type": result["token-type"],
"content-type": result["content-type"],
"expiry": result["expiry"]
};
let response = await Api.apiCall('/api/v1/categories/' + data +'.json', 'GET', {}, headers);
let categoryDetailData = response.body;
this.setState({name: categoryDetailData['name'], location: categoryDetailData['location'], tasks: categoryDetailData['submissions']});
console.log("_______________________________________________")
console.log(tasks)
console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$")
console.log(categoryDetailData['submissions'])
if (categoryDetailData['photos'] == null || categoryDetailData['photos'] == ''){
this.setState({totalPictures: 1, photos: [{uri: 'https://portal.lancercorp.com/Content/Images/missing.png'}]})
return categoryDetailData;
}else{
this.setState({totalPictures: categoryDetailData['photos'].length, photos: categoryDetailData['photos']})
return categoryDetailData;
}
})
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.mainContainer}>
<View style={styles.headerContainer}>
<TouchableOpacity
onPress={this._onPressButton}>
<Image source={require('../../img/back.png')}>
</Image>
</TouchableOpacity>
<Text style={styles.headerText}>
{this.state.name}
</Text>
<View style={{width:20}}>
</View>
</View>
<View style={styles.upperContainer}>
<ScrollView horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false} onScroll={this._onScroll} >
{this.state.photos.map((source, i) => {
return (
<Image
key={i} // we will use i for the key because no two (or more) elements in an array will have the same index
style={styles.images}
source={source}
/>
);
})}
</ScrollView>
<View style={styles.locationContainer}>
<Image source={require('../../img/location_white.png')}>
</Image>
<Text style={styles.locationText}>
{this.state.location}
</Text>
</View>
<View style={styles.numberContainer}>
<Text style={styles.numberText}>
{this.state.value}/{this.state.totalPictures}
</Text>
</View>
</View>
<View style={styles.lowerContainer}>
<ScrollView showsVerticalScrollIndicator={false}>
<Row size={12}>
{this.state.tasks.map((mySource, j)=>{
return (
mySource.map((source, i)=>{
return (
<Col sm={6} md={4} lg={3} style={styles.submissionBox}>
<TouchableOpacity onPress={() => navigate('SubmissionForm', {data: source})}>
<View style={styles.rowContainer}>
<View style={styles.contentContainer}>
<View style={styles.contentSubContainer1}>
{this._renderImage(source.status)}
</View>
<View style={styles.contentSubContainer2}>
<Text key={i} style={styles.idText}>
{source.id}
</Text>
<Text style={this._statusStyle(source.status)}>
{source.status}
</Text>
</View>
</View>
</View>
</TouchableOpacity>
</Col>
);})
);}
)}
</Row>
<TouchableOpacity onPress={() => navigate('SubmissionForm')}>
<View style={{backgroundColor: 'transparent', marginLeft: 25}}>
<Image source={require('../../img/btn.png')} style={styles.buttonImage}>
<Text style={styles.buttonText}>
NEW SUBMISSION
</Text>
</Image>
</View>
</TouchableOpacity>
</ScrollView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
},
upperContainer:{
flex: 1,
},
lowerContainer:{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
padding: 6,
},
rowContainer:{
flex: 1,
flexDirection: 'row',
marginBottom: 12,
backgroundColor: 'black',
},
contentContainer:{
flex: 1,
flexDirection: 'column',
padding: 10,
height: 132,
backgroundColor: 'white',
},
contentSubContainer1:{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
contentSubContainer2: {
flex: 3,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
headerContainer: {
padding: 12,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#544849',
},
submissionBox: {
padding: 6,
},
headerText:{
color: '#ffffff',
fontWeight: 'bold',
fontSize: 20,
},
buttonText:{
fontSize: 18,
color: 'white',
marginBottom: 12,
padding:18,
textAlign: 'center'
},
buttonImage:{
justifyContent:'center',
alignItems: 'center',
},
headerSmallText:{
color: '#ffffff',
fontWeight: 'bold',
fontSize: 12,
},
images:{
width: width,
height: height/2-35,
},
locationContainer:{
flexDirection: 'row',
justifyContent: 'flex-start',
position: 'absolute',
top: (height/2)-80,
left: 20,
},
locationText:{
color: '#ffffff',
fontWeight: 'bold',
marginLeft: 10,
fontSize: 12,
},
numberText:{
color: '#ffffff',
fontWeight: 'bold',
fontSize: 12,
},
numberContainer:{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
width: 30,
top: 10,
left: width-40,
backgroundColor: 'rgba(52, 52, 52, 0.9)',
borderRadius:10,
},
idText:{
fontSize: 15,
color: '#4a4a4a',
fontWeight: 'bold'
},
});
安卓屏幕：
IOS屏幕：
主要问题是透明背景和标题。