2018-10-29

React-native中遇到的问题：

[图片上传失败...(image-742e6f-1540780288362)]

环境配置问题，没有连接adb或者没连接成功

解决办法：运行命令提示符：adb connect 127.0.0.1:62001

[图片上传失败...(image-315c72-1540780288362)]

问题出现是服务没有开启，进入到项目目录启动服务，运行代码：

react-native start

3. could not get batchedbridge, makesure your bundle is packaged correctly

解决办法：运行React-native run-Android或引入到Android Studio中运行，然后摇动手机(Android端)，重新配置好IP和端口号

4. 替换项目中的图片，终端每次报错。

解决办法：关闭终端，杀掉App,重新运行此项目。原因可能是react-native还不太成熟。或是图片名字没改，图片换了。

5.react native - expected acomponent class, got [object Object]

该错误可能是你引用了小写的组件，组件首字母一定要大写，比如<login/>应该写成<Login/>

调试方法：

1.开发者菜单的Reload选项

Reload代表重新加载程序的js代码,意味着程序会重新运行,并且你修改过后的js代码会更新,并运行.也就是开发者菜单中的第一项.每次修改代码,需要重新运行,只需调出开发者菜单,选中Reload即可.

[图片上传失败...(image-8508d7-1540780288360)]

[图片上传失败...(image-147286-1540780288360)]

如何在一个项目中切换运行不同页面：

1.在A页面中实现一个声明一个函数refresView()

2.在A页面push参数中增加一个回掉函数callBack(msg)

3.在B页面pop时候调用callBack将值传回，更新界面

代码的实现：

A页面实现：

/**

• Sample React Native App

• https://github.com/facebook/react-native

• @flow

*/

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

Navigator,

ToastAndroid,

View

} from 'react-native';

import Button from './Button';

import Test from './test';

var _navigator;

var d;

class Hello2 extends Component {

constructor(props){

 super(props);

  d = this;

  this.state = {city:''}

//  this.refeshView = this.refeshView.bind(this);                      

}

configureScene(route){

  return Navigator.SceneConfigs.FadeAndroid;

}

refeshView(msg){

console.log('刷新');

d.setState({'city':msg});

console.log('end');

}

renderScene(router, navigator){

  console.log(d);

  _navigator = navigator;

  if(router.id === 'main'){

  return <View style={styles.container}>

  <Button  onPress={() => {

           console.log('start');

            _navigator.push({title:'MainPage',id:'page',callBack:(msg)=>{

             console.log(d);

             d.refeshView(msg);

             console.log('end');}});     

      }} text={'打开'} style={styles.instructions} disabled = {false}/>

    <Text style={styles.welcome}>

      {d.state.city}

    </Text>

    <Text style={styles.instructions}>

    </Text>

    <Text style={styles.instructions}>

      Press Cmd+R to reload,{'\n'}

      Cmd+D or shake for dev menu

    </Text>

  </View>

  }else if(router.id === 'page'){

    return (

    <Test navigator={navigator} router={router}/>

  );

  }

}

render() {

return (

<Navigator

            initialRoute={{ title: 'Main', id:'main'}}

            configureScene={this.configureScene}

            renderScene={this.renderScene} />

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

},

});

AppRegistry.registerComponent('Hello2', () => Hello2);

B页面的实现

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

var _navigator;

import Button from './Button';

class Test extends Component {

render() {

return (

  <View style={{flex:1}}>

    <Button  onPress={() => {

         console.log(this.props);

         this.props.router.callBack('I am a Student');

         this.props.navigator.pop();

      }} text={'返回'} style={styles.instructions} disabled = {false}/>

  </View>

);

}

}

const styles = StyleSheet.create({

instructions: {

textAlign: 'center',

color: '#126798',

marginTop: 50,

}

});

module.exports = Test;