王学岗ReactNative开发3——项目实战一

解决bug的万能钥匙

react-native start --reset-cache
adb reverse tcp:8081 tcp:8081
这是我们要实现的效果
王学岗ReactNative开发3——项目实战一
第一：实现类似于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,
    },

});

第三：实现如下图片效果
王学岗ReactNative开发3——项目实战一
修改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,
    },
});

王学岗ReactNative开发3——项目实战一

相关推荐