在某些Android设备中未显示React Native View

时间:2018-09-05 16:17:53

标签: android react-native

我试图更改代码中的所有内容,但在某些android设备上仍然存在问题。有人知道吗?

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View, Platform, Picker, Button, Alert , Text , TextInput , AsyncStorage , Image} from 'react-native';
import OrginalStyle from './../css/welcome';
import { Dropdown } from 'react-native-material-dropdown';
import {Column as Col, Row} from 'react-native-flexbox-grid';



export default class AddAddress extends Component {
 constructor(props)
 {
  super(props);
  this.state = {
    isLoading: true,
    PickerValueHolder : '',
    dataSource : []
  }
 }
 //---------------
 static navigationOptions = {
     headerTitle : <Text style={OrginalStyle.headerTitle}>افزودن آدرس جدید  </Text>,
     headerRight : <Image source={{uri: 'http://marmallad.ir/application/views/main/images/logo_color.png'}} style={OrginalStyle.headerLogo} />,
     headerStyle : {
     backgroundColor : '#d1ad4d'
   }
 }
 //-------------
 componentDidMount() {
   AsyncStorage.getItem("password").then((value) => {
       this.setState({"password": value});
   })
   .then(res => {
     AsyncStorage.getItem("mobile").then((value) => {
         this.setState({"mobile": value});
     });
   });
      return fetch('http://marmallad.ir/service/cities')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            isLoading: false,
            dataSource: responseJson
          }, function() {
            // In this block you can do something with new state.
          });
        })
        .catch((error) => {
          console.error(error);
        });
    }
    //---------
    GetPickerSelectedItemValue=()=>{
      const {navigate} = this.props.navigation;
      //-----------
      let address_id = this.state.PickerValueHolder;
      let address = this.state.address;
      let mobile = this.state.mobile;
      let tel = this.state.tel;
      //----------
        fetch("http://marmallad.ir/service/add_new_address", {
        method: 'POST',
        headers: new Headers({
          'Content-Type': 'application/x-www-form-urlencoded', // <-- Specifying the Content-Type
        }),
        body: "key=***&mobile="+mobile+"&state_id="+address_id+"&address="+address+"&tel="+tel // <-- Post parameters
      })
      .then((response) => response.text())
      .then((responseData) => {
        console.log(responseData);
        if(responseData == 1)
        {
          navigate('Address');
        }
        else {
          alert('لطفا اطلاعات آدرس را بدرستی وارد نمایید.');
        }
      })
      .catch((error) => {
        console.error(error);
      });
    }
    //-------------
 render() {
   const {navigate} = this.props.navigation;
   return (
     <View style={{ flexDirection: 'column',marginTop : 80}}>
       <Row size={12}>
         <Col sm={2} md={2} lg={2}>
            <Text></Text>
         </Col>
         <Col sm={8} md={8} lg={8} style={{backgroundColor:'#fff' , padding : 15 }}>
         <Text style={styles.labelText}>نام محل خود را انتخاب کنید: </Text>
         <Picker
           style={{width:"80%"}}
           selectedValue={this.state.PickerValueHolder}
           onValueChange={(itemValue) => this.setState({PickerValueHolder: itemValue})} >
           { this.state.dataSource.map((item, key)=>(
             <Picker.Item label={item.value} value={item.id} key={key} />)
           )}
         </Picker>
         </Col>
         <Col sm={2} md={2} lg={2}>
            <Text></Text>
         </Col>
       </Row>
       <Row size={12}>
         <Col sm={2} md={2} lg={2}>
            <Text></Text>
         </Col>
         <Col sm={8} md={8} lg={8} style={{backgroundColor:'#fff' , padding : 15 }}>
         <Text style={styles.labelText}>آدرس محل : </Text>
         <TextInput
           onChangeText={(address) => this.setState({address})}
           style={styles.inputText}
           underlineColorAndroid='transparent'
           placeholder = "آدرس گیرده سفارش را وارد نمایید"
           value={this.state.address}
         />
         </Col>
         <Col sm={2} md={2} lg={2}>
            <Text></Text>
         </Col>
       </Row>
       <Row size={12}>
         <Col sm={2} md={2} lg={2}>
            <Text></Text>
         </Col>
         <Col sm={8} md={8} lg={8} style={{backgroundColor:'#fff' , padding : 15 }}>
         <Text style={styles.labelText}>تلفن سفارش : </Text>
         <TextInput
           onChangeText={(tel) => this.setState({tel})}
           style={styles.inputText}
           underlineColorAndroid='transparent'
           placeholder = "تلفن گیرنده سفارش را وارد نمایید"
           value={this.state.tel}
         />
         </Col>
         <Col sm={2} md={2} lg={2}>
            <Text></Text>
         </Col>
       </Row>
       <Row size={12}>
         <Col sm={2} md={2} lg={2}>
            <Text></Text>
         </Col>
         <Col sm={8} md={8} lg={8} style={{backgroundColor:'#fff' , padding : 15 }}>
          <Button title="افزودن آدرس جدید" onPress={ this.GetPickerSelectedItemValue } style={styles.loginButton} color="#d1ad4d" />
         </Col>
         <Col sm={2} md={2} lg={2}>
            <Text></Text>
         </Col>
       </Row>
     </View>
   );
 }
}
const drawerStyles = {
  drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
  main: {paddingLeft: 3},
}
const styles = StyleSheet.create({
  loginButton : {
    marginRight : 25,
    marginLeft : 25,
    padding: 10,
    textAlign : 'center',
    borderRadius : 15 ,
    color : '#fff',
    marginTop: 15 ,
    elevation : 1 ,
    shadowColor : '#000',
    shadowOffset : {width : 0 , height : 2},
    shadowOpacity : .1,
    overflow : 'hidden',
    fontFamily : 'IRANSansMobile',
    width: '80%'
  },
  inputText : {
    borderColor : 'rgba(0,0,0,.1)',
    borderWidth : 1,
    padding: 10,
    borderRadius: 2 ,
    height:40,
    fontFamily : 'IRANSansMobile',
    textAlign : 'right'
  },
  labelText : {
    ...Platform.select({
      ios : {
        fontFamily : 'IRANSansMobile' ,
        textAlign : 'left'
      },
      android : {
        fontFamily : 'IRANSansMobile',
        textAlign : 'left'
      }
    }),
    marginBottom : 10,
    color : "#d1ad4d" ,
  },
  searchInput : {
    ...Platform.select({
      ios : {
        fontFamily : 'IRANSansMobile' ,
        fontWeight : 'bold',
        textAlign: 'right',
      },
      android : {
        fontFamily : 'IRANSansMobile_Bold'
      }
    }),
    padding : 20,
    backgroundColor : '#fff',
    borderColor : '#d1ad4d',
    borderRadius : 20,
    borderWidth : 2,
    margin : 10,
    width : '100%',
    marginTop : -60
  },
});

问题出在(在此手机视图中未显示任何内容:

LG k82017 7.0版

诺基亚3 7.0版

SONY XPERIA ZR 5.0版

我也曾经使用过下拉插件,但是我还没找到方法。请帮我,因为我在网络上找不到任何解决方案

0 个答案:

没有答案