視圖在 android 和 ios 的 react native 中看起來不同

Question

我正在 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屏幕：

主要問題是透明背景和標題。

Answer 1

您可以將statusbar設置為hidden <StatusBar hidden />

Answer 2

把它放在你的根應用程序中。 就我而言，它是App.js

<StatusBar animated={true} backgroundColor="#fff" barStyle="dark-content"/>

希望這可以幫助