解决bug的万能钥匙
react-native start --reset-cache
adb reverse tcp:8081 tcp:8081
这是我们要实现的效果
第一:实现类似于android中ViewPager+Fragment +TabLayout效果
我们看下index.js文件
/**
* @format
* @lint-ignore-every XPLATJSCOPYRIGHT1
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import Main from './js/Main/main'
//这个函数类似java的Main函数,第一个参数是app的名字,第二个参数是入口的组件
AppRegistry.registerComponent(appName, () => Main);
main.js文件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
Platform,
View
} from 'react-native';
//1,安装nativigator npm install react-native-deprecated-custom-components --save
//2,nativigator用于界面的跳转,相当于android的Arouter夹包,联想startActivity();
import TabNavigator from 'react-native-tab-navigator';
import Home from '../Home/home';
import Find from '../Find/find';
import Mine from '../Mine/mine';
import More from '../More/more';
//1,这个是第三方组件,需要使用命令npm install react-native-tab-navigator --save安装
//2,类似于android中NavigationDrawable控件
import {Navigator} from "react-native-deprecated-custom-components"
//管理四个界面
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'home' //默认选中主页
}
}
render() {
return (
//这是官方写法,直接从官方文档复制下来的
//底部四个导航栏是文字+图片的形式
<TabNavigator>
<TabNavigator.Item
//选中的导航栏的文字
title="首页"
//未选中的图片,通过require函数导入图片,../表示返回上一级
renderIcon={() => <Image source={require('../../res/images/icon_tabbar_homepage.png')} style={styles.iconStyle} />}
//选中的图片
renderSelectedIcon={() => <Image source={require('../../res/images/icon_tabbar_homepage_selected.png')} style={styles.iconStyle} />}
selected={this.state.selectedTab === 'home'}
//点击按钮的时候做什么事情,selectedTab是一个状态变量
onPress={() => this.setState({ selectedTab: 'home' }) }
>
</TabNavigator.Item>
<TabNavigator.Item
title="发现"
renderIcon={() => <Image source={require('../../res/images/icon_tabbar_merchant_normal.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('../../res/images/icon_tabbar_merchant_selected.png')} style={styles.iconStyle} />}
selected={this.state.selectedTab === 'shop'}
onPress={() => this.setState({ selectedTab: 'shop' }) }
>
<Find />
</TabNavigator.Item>
<TabNavigator.Item
title="订单"
renderIcon={() => <Image source={require('../../res/images/icon_tabbar_mine.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('../../res/images/icon_tabbar_mine_selected.png')} style={styles.iconStyle} />}
selected={this.state.selectedTab === 'mine'}
onPress={() => this.setState({ selectedTab: 'mine' }) }
>
<Mine />
</TabNavigator.Item>
<TabNavigator.Item
title="我的"
renderIcon={() => <Image source={require('../../res/images/icon_tabbar_mine.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('../../res/images/icon_tabbar_mine_selected.png')} style={styles.iconStyle} />}
selected={this.state.selectedTab === 'more'}
onPress={() => this.setState({ selectedTab: 'more' }) }
>
<More />
</TabNavigator.Item>
</TabNavigator>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
iconStyle: {
width: Platform.OS === 'ios' ? 30 : 25,
height: Platform.OS === 'ios' ? 30 : 25
}
});
mine find等其它四个界面如下
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
* @lint-ignore-every XPLATJSCOPYRIGHT1
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export default class Mine extends Component<Props> {
render() {
return (
<View>
<Text>
Mine页面
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
第二:界面的跳转,类似于android中的Arouter框架,联想startActivity();
修改main.js文件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
Platform,
View
} from 'react-native';
//1,安装nativigator npm install react-native-deprecated-custom-components --save
//2,nativigator用于界面的跳转,相当于android的Arouter夹包,联想startActivity();
import TabNavigator from 'react-native-tab-navigator';
import Home from '../Home/home';
import Find from '../Find/find';
import Mine from '../Mine/mine';
import More from '../More/more';
//1,这个是第三方组件,需要使用命令npm install react-native-tab-navigator --save安装
//2,类似于android中NavigationDrawable控件
//3,注意Navigator需要{}包裹
import {Navigator} from "react-native-deprecated-custom-components"
//管理四个界面
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'home' //默认选中主页
}
}
render() {
return (
//这是官方写法,直接从官方文档复制下来的
//底部四个导航栏是文字+图片的形式
<TabNavigator>
<TabNavigator.Item
//选中的导航栏的文字
title="首页"
//未选中的图片,通过require函数导入图片,../表示返回上一级
renderIcon={() => <Image source={require('../../res/images/icon_tabbar_homepage.png')} style={styles.iconStyle} />}
//选中的图片
renderSelectedIcon={() => <Image source={require('../../res/images/icon_tabbar_homepage_selected.png')} style={styles.iconStyle} />}
selected={this.state.selectedTab === 'home'}
//点击按钮的时候做什么事情,selectedTab是一个状态变量
onPress={() => this.setState({ selectedTab: 'home' }) }
>
<Navigator
//1.在初始化navigator的时候,会把Home放到路由表里
//2,当某个组件需要点击跳转到这个路由的时候,就会回调renderScene方法,renderScene方法
//的返回值就是你要渲染的那个组件
initialRoute={{
name:"首页",
component:Home
}
}
renderScene={
(router,navigator)=>{
//Component是Home的父类,这里的component就是initialRoute中的Home
let Component= router.component;
//1,返回当前的组件
//2,两个navigator,前面的navigator是键,后面的navigator是值,
//将会把这个键值对传给Component,这里的Conponent就是Home
//3,person={...student},表示将student的属性传给person
return <Component {...router.params} navigator={navigator}/>
}
}/>
</TabNavigator.Item>
<TabNavigator.Item
title="发现"
renderIcon={() => <Image source={require('../../res/images/icon_tabbar_merchant_normal.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('../../res/images/icon_tabbar_merchant_selected.png')} style={styles.iconStyle} />}
selected={this.state.selectedTab === 'shop'}
onPress={() => this.setState({ selectedTab: 'shop' }) }
>
<Find />
</TabNavigator.Item>
<TabNavigator.Item
title="订单"
renderIcon={() => <Image source={require('../../res/images/icon_tabbar_mine.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('../../res/images/icon_tabbar_mine_selected.png')} style={styles.iconStyle} />}
selected={this.state.selectedTab === 'mine'}
onPress={() => this.setState({ selectedTab: 'mine' }) }
>
<Mine />
</TabNavigator.Item>
<TabNavigator.Item
title="我的"
renderIcon={() => <Image source={require('../../res/images/icon_tabbar_mine.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('../../res/images/icon_tabbar_mine_selected.png')} style={styles.iconStyle} />}
selected={this.state.selectedTab === 'more'}
onPress={() => this.setState({ selectedTab: 'more' }) }
>
<More />
</TabNavigator.Item>
</TabNavigator>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
iconStyle: {
width: Platform.OS === 'ios' ? 30 : 25,
height: Platform.OS === 'ios' ? 30 : 25
}
});
这段是增加的代码
<Navigator
initialRoute={{
name:"首页",
component:Home
}
}
renderScene={
(router,navigator)=>{
let Component= router.component;
return <Component {...router.params} navigator={navigator}/>
}
}/>
我们在看下Home.js文件
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
* @lint-ignore-every XPLATJSCOPYRIGHT1
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TextInput,Image,StatusBar} from 'react-native';
import HomeDetail from './HomeDetail';
export default class Home extends Component<Props> {
//因为私有方法,所以前面要加_
_pressButton(){
//从Home中拿到Main.js传过来的navigator,在props里可以拿到
const {navigator} = this.props;
//1,可能其它组件并未传递这个navigator,所以需要判断,如果是有就是true,没有就是false
if (navigator) {
//startActivity,跳转到详情页面
navigator.push({
name:"详情页面",
component:HomeDetail
})
}
}
render() {
return (
<View>
<StatusBar
backgroundColor='rgba(255,96,0,1.0)'
barStyle="light-content"
/>
//1,通过按钮触发当前类的方法_pressButton()的时候必须绑定
//2, 注意,不要写成this._pressButton()
<Text onPress={this._pressButton.bind(this)}>
{/*首页导航栏*/}
Main页面
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
navBarStyle:{
backgroundColor:'rgba(255,96,0,1.0)',
height:60,
flexDirection:'row',
alignItems: 'center',
justifyContent:'space-around',
position:'relative',
top:-10
},
navRightImg:{
width:30,
height:30
},
topInputStyle:{
width:width*0.7,
height:40,
backgroundColor: 'white',
borderRadius:16,
paddingLeft:10
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
我们点击Home.js文件的时候跳转到详情界面
以下是详情界面的js文件
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
* @lint-ignore-every XPLATJSCOPYRIGHT1
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
export default class HomeDetail extends Component<Props> {
_pressButton() {
const { navigator } = this.props;
if(navigator) {
//很熟悉吧,入栈出栈~ 把当前的页面pop掉,这里就返回到了上一个页面:List了
//相当于android中的 finish()方法
navigator.pop();
}
}
render() {
return (
<View style={styles.container}>
//点击<Text/>调用_pressButton()方法
<Text style={styles.welcome} onPress={this._pressButton.bind(this)}>
HomeDetail页面_点击返回
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'blue',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
第三:实现如下图片效果
修改home.js文件
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
* @lint-ignore-every XPLATJSCOPYRIGHT1
*/
import React, {Component} from 'react';
//StatusBar 状态栏类
import {Platform, StyleSheet, Text, View,TextInput,Image,StatusBar} from 'react-native';
import HomeDetail from './HomeDetail';
//获取到当前屏幕的属性
var Dimensions =require('Dimensions')
//当前的宽度和高度
var {width, height} = Dimensions.get('window');
export default class Home extends Component<Props> {
//因为私有方法,所以前面要加_
_pressButton(){
//从Home中拿到Main.js传过来的navigator,在props里可以拿到
const {navigator} = this.props;
//1,可能其它组件并未传递这个navigator,所以需要判断,如果是有就是true,没有就是false
if (navigator) {
//startActivity,跳转到详情页面
navigator.push({
name:"详情页面",
component:HomeDetail
})
}
}
render() {
return (
<View>
//设置状态栏颜色
<StatusBar
backgroundColor='rgba(255,96,0,1.0)'
barStyle="light-content"
/>
//在方法里返回一个组件,一定要加{}
{this.renderNavBar()}
//1,通过按钮触发当前类的方法_pressButton()的时候必须绑定
//2, 注意,不要写成this._pressButton()
<Text onPress={this._pressButton.bind(this)}>
{/*首页导航栏*/}
Main页面
</Text>
</View>
);
}
renderNavBar() {
//返回一个组件,方法里返回一个组件
return (
<View style={styles.navBarStyle}>
<Text>
长沙
</Text>
//输入框
<TextInput
//默认的文字提示
placeholder="养生" style={styles.topInputStyle}></TextInput>
//最右侧的两个图标
<View style={{flexDirection:'row'}}>
<Image source={require('../../res/images/icon_homepage_message.png')} style={styles.navRightImg}/>
<Image source={require('../../res/images/icon_homepage_scan.png')} style={styles.navRightImg}/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
navBarStyle:{
backgroundColor:'rgba(255,96,0,1.0)',
height:60,
//主轴是横向的,从左向右
flexDirection:'row',
//交叉轴居中
alignItems: 'center',
//设置各个组件的间距相等
justifyContent:'space-around',
//设置状态栏偏移
position:'relative',
//相对向上偏移10个像素
top:-10
},
navRightImg:{
//设置图片的宽和高
width:30,
height:30
},
topInputStyle:{
//输入框宽度
width:width*0.7,
//输入框高度
height:40,
backgroundColor: 'white',
//圆角
borderRadius:16,
//输入框的内容距离左侧的距离
paddingLeft:10
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});