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和端口号
- 替换项目中的图片,终端每次报错。
解决办法:关闭终端,杀掉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
@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;