ReactNative合并入口js

ReactNative合并入口js

Android 有 index.android.js文件编写android 平台的版本代码，而index.ios,js是编写ios平台的，但是react native 本来就是2个平台共同编写，只是，一些控件或者，处理方式不同，所以入口文件和大部分代码是一致的，不需要2个文件，那么我们这么才能让入口文件一致呢。

第一步编写代码ios或者android

这里注意这个入口文件必须是首字母大写的js文件。比如Index.js文件，这里我是参考react native文档写的一个网络读取电影的列表，你只需要能正常运行的代码即可

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

var MOCKED_MOVIES_DATA = [
  {
    title: "标题",
    year: "2015",
    posters: { thumbnail: "http://i.imgur.com/UePbdph.jpg" },
     REQUEST_URL:
  "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json"

  }
];
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  Alert,
  ScrollView,
  Image,
  FlatList,
  SectionList,
  ActivityIndicator

} from 'react-native';



class AsweSomeProject extends  Component {
  constructor(props){
    super(props);
    this.state = {text:'',isLoading:true,movies:[]};
    this.fetchData = this.fetchData.bind(this);
    this.getNetWorkFun = this.getNetWorkFun.bind(this);
  }

  //初始化加载数据
  componentDidMount(){
    this.fetchData(MOCKED_MOVIES_DATA[0].REQUEST_URL);
    // this.getNetWorkFun('13265797978','y123456','','','');
  }

  fetchData(url){
    fetch(url).then((response)=> response.json())
    .then((responseJson) => {
      console.log(responseJson)
      this.setState({
          movies:this.state.movies.concat(responseJson.movies),
          isLoading : false
      }).error((error)=>{
          this.setState({
            isLoading : false
          })
        Alert.alert(error);
        console.error(error);
      })
    })
  }


  async getNetWorkFun(telephone,password,longitude,latitude,JpushId){
    try{
     let response = await fetch('http://47.52.135.9:8686//Minority/mobile/interface/user/login.do',{
       method:'POST',
       headers:{
         'Content-Type':'application/json'
       },
       body:'telephone='+telephone+'&password='+password+'&longitude='+longitude+'&latitude='+latitude+'&JpushId='+JpushId
     });
     console.log(response);
     let responseJson = await response.json();
     console.log(responseJson);
     return responseJson.datas;
    } catch(error){
      Alert.alert(error);
      console.error(error);
    }
  }

  revieLoadingView(){
    return (
    
    数据在加载中
    {/* 加载符符号 */}
    
  
    );
  }

  returnShowData({item}){
    return (
      
       
      {item.title}
      {item.year}
      
    );
  }

  render() {
    if(!this.state.isLoading){
        return 
      }else{
        return this.revieLoadingView();
      }
  }  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image:{
    width:100,height:200
  },
  list:{
    flex:1,
    marginTop:20,
    backgroundColor:'#f5f5f5'
  },

  showText:{
    fontSize:20,
    color:'red',
    textAlign:'center'
  },
  rightContainer:{
    flex:1,
  }
 
});

export default AsweSomeProject

// AppRegistry.registerComponent('AsweSomeProject', () => AsweSomeProject);

这里最后我是把AsweSomeProject设置成了默认的文件主类，也是默认的Index.js文件的主类

合并入口文件

在index.android.js和index.ios.js文件里面注册相同的文件入口文件

import {AppRegistry} from 'react-native';
import Index from './Index';
import {name as appName} from './app.json';


AppRegistry.registerComponent(appName, () => Index);

他们2个文件是一样的，这里的app.json文件是本应用的注册名称,里面代码如下

{
  "name": "AsweSomeProject",
  "displayName": "AsweSomeProject"
}

这里的关键点是入口js文件名称必须是大小字母开头，不然你修改成小写试试，可能是有其他考虑把。