Bunny's Code Burrow

this is a JS world


  • Home

  • About

  • Archives

  • Tags

  • Search

postreact native AsyncStorage

Posted on 2017-04-22

react native AsyncStorage

componentDidMount() {
 let _that=this;
  AsyncStorage.getItem('userid',(err, result) => {
     console.log(result);
   var userid=result;
   var startday=this.state.startday;//set date
   var endday=this.state.endday;//set date
   console.log(userid);
   console.log(startday); //check date 
   console.log(endday);
   var url = 'http://47.90.60.206:8080/pt_server/sportchart.action'; // create url 
     // var url = 'http://192.168.20.12:8080/pt_server/traineelogin.action';
     url += '?userid='+userid+'&start='+startday+'&end='+endday;
     console.log(url); //check url 
     fetch(url).then(function(response) { 
           return response.json();
         }).then(function(res) {
         console.log(res);//check json,then render the view again 
           if (res["data"]!=null) {
             _that.setState(
             {

             }
           );

         }else{
           Alert.alert('error'); //alert warning and error 
         }
   });
 });
 }

postreact native ios to setup network

Posted on 2017-04-22

react native ios to setup network

  1. above ios 9 cannot visit http
  2. go to path: ios/projectname/info.plist
  3. find
  1. run react-native run-ios again

react native ios view bug

Posted on 2017-04-22

React Native ios problems

here is the bugs

View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View: <RCTShadowView: 0x6080001bc620; viewName: RCTImageView; reactTag: 315; frame: {{0, 37}, {325, 150}}>
the way to solve it is 

 remove 'flex: x' or replace with 'flexGrow: x', x may be 0, 1, or 2 whatever, and it will resolve most problems.

css to realise the slider

Posted on 2017-04-22

CSS to modify the slider

de  >/*css reset start*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
/*css reset end*/

/*css public start*/
.floatfix {
*zoom: 1;
}
.floatfix:after {
content: "";
display: table;
clear: both;
}
/*css public end*/

/*slider start*/
.slider-contaner{
width:100%;
position:relative;
}
.slider-item + .slider-item{
opacity:0;
}
.slider-item{
width:100%;
position:absolute;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
background-size:100%;
}
.focus-container{
position:absolute;
z-index:7;
margin:0 auto;
left:0;
right:0;
}
.focus-container li{
width:10px;
height:10px;
border-radius:50%;
float:left;
margin-right:10px;
background:#fff;
}
.focus-item{
width:100%;
height:100%;
border-radius:inherit;
animation-timing-function: linear;
animation-name:fade;
animation-iteration-count: infinite;
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
opacity:0;
}
.focus-container ul{
margin-left:46%;
}
/*set the position of focus*/
.focus-container{
bottom:2%;
}
/*set the color of image*/
.focus-item{
background:#51B1D9;
}
/*set the animation time*/
.slider-item,.focus-item{
animation-duration: 20s;
}
.slider-item1,.focus-item1{
animation-delay: -1s;
}
.slider-item2,.focus-item2{
animation-delay: 3s;
}
.slider-item3,.focus-item3{
animation-delay: 7s;
}
.slider-item4,.focus-item4{
animation-delay: 11s;
}
.slider-item5,.focus-item5{
animation-delay: 15s;
}
@keyframes fade{
0%{
opacity:0;
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:0;
z-index:0;
}
100%{
opacity:0;
z-index:0;
}
}
/*set the path */
.slider-item1{
background-image:url(imgs/1.jpg);
}
.slider-item2{
background-image:url(imgs/2.jpg);
}
.slider-item3{
background-image:url(imgs/3.jpg);
}
.slider-item4{
background-image:url(imgs/4.jpg);
}
.slider-item5{
background-image:url(imgs/5.jpg);
}
/*set the height of image*/
.slider,.slider-item{
padding-bottom:40%;
}de>
<div class="layapptop">
        <div class="app">
            <a  href="products-on-promotion">
                <section class="slider-contaner">
                <ul class="slider">
                <li class="slider-item slider-item1"></li>
                <li class="slider-item slider-item2"></li>
                </ul>
                </section>
            </a>
           <!--<div class="app_box">
                <i class="icon_a"></i>
                <div class="app_tab_con">
                    <img style="width:98px;height:98px"  src="../../Content/images/tree.jpg" >
                </div>
                <h2>Click to open gift</h2>
            </div>--> 
        </div>
        <div class="server_box">
            <a class="server" href="contactus">
                <img style="width:98px;height:58px"  src="../../Content/images/ContactUs.png" >
            </a>
            <div class="server_con">
                <i class="icon_a"></i>
                <h2>0800 1 289 266</h2>
                <p>worktime 9:00-17:00</p>
            </div>
        </div>


</div>

React Native Google Map

Posted on 2017-04-20

How to install airbnb/react-native-map

  1. https://github.com/airbnb/react-native-maps
  2. install
    First, download the library from npm:
    npm install react-native-maps –save

    then ,most important is
    rnpm:

    currently, it seems something wrong with rnpm,so we have to install and make sure they are linked

    react-native rnpm

    then:

    react-native link react-native-maps

currently ,it seems the v0.14.0 doesn’t work on Android,
so we have to back to the previous version

Package.json
"dependencies": {
"react": "15.3.2",
"react-native": "0.35.0",
"react-native-check-box": "^1.0.4",
"react-native-checkbox": "^1.1.0",
"react-native-maps": "^0.13.1",

then
npm install

  1. Specify your Google Maps API Key:
    then the way to check SHA-1 is as following:

    keytool -list -v -keystore yourname.keystore -alias yourname-alias
    then input the password
    then you will find information obout the APP,and the SHA-1
    Just copy and past into SHA-1 certificate fingerprint

the informaiton below is a demo,not real SHA-1

  1. Ensure that you have Google Play Services installed:
    open android studio , open sdk manager and install all these as below



    just make sure
  • Extras / Google Play services
  • Extras / Google Repository
  • Android 6.0 (API 23) / Google APIs Intel x86 Atom System Image Rev.
    19
  • Android SDK Build-tools 23.0.3

    when error occurs,

    npm cache clean
    react-native run-android

Another choice is not run link ,but manually add them into files according to installation doc.
Much better
More than 10 hours on this function, but worth

Another important point

DO NOT TEST GPS on Emulator!

I know it is silly!But do not try it again

1…1516
Jenny Zeng

Jenny Zeng

Loving code ,especially javascript, React Native

155 posts
37 tags
GitHub Linkedin
© 2020 Jenny Zeng
Powered by Hexo
Theme - NexT.Pisces