React-Native初体验三（window下搭建应用的首页）

xiaoxiao2022-06-28 22

ReactNativeTest项目的下载地址:github

1.reactNativeTest项目运行的效果

2.实现启动页

导航器的实现

1.定一个Welcome.js文件

2.在Welcome.js中使用Navigator导航器

3.给Navigator导航器初始化

Welcome.js文件代码：

/**导包*/ import React from 'react'; import { StyleSheet, Navigator, StatusBar, BackAndroid, View, Text, Platform } from 'react-native'; /**导包*/ import Splash from '../Splash'; /**导一个工具类*/ import { NaviGoBack } from '../utils/CommonUtils'; var _navigator; class Welcome extends React.Component { /** * 构造器初始化 * @param props */ constructor(props) { super(props); //函数的定义并初始化 this.renderScene = this.renderScene.bind(this); this.goBack = this.goBack.bind(this); //监听返回事件 BackAndroid.addEventListener('hardwareBackPress', this.goBack); } /** * 监听手机点击返回按钮 */ goBack() { return NaviGoBack(_navigator); } /** * 渲染场景的函数：这里接收系统传来的两个参数，一个是路由对象，一个是导航器对象 */ renderScene(route, navigator) { let Component = route.component;//获取到initialRoute路由中设计的Splash组件 _navigator = navigator;//导航器对象，在goBack（）函数中需要用到 return ( <Component navigator={navigator} route={route} />//返回一个渲染界面的Splash组件，并传递两个参数 ); } /** * 界面跳转的动画：这里接收系统传来的两个参数，一个是路由对象，一个是导航器对象 */ configureScene(route, routeStack) { return Navigator.SceneConfigs.PushFromRight; } /** * initialRouter: 路由初始化配置信息，就是说页面加载时，第一次需要展现什么内容 *configureScene: 场景转换动画配置。在RN看来，从一个页面切换到另外一个页面，就是从一个场景切换到另外一个场景，这里配置的是场景动画信息，比如Navigator.SceneConfigs.FadeAndroid 就是淡入淡出 *renderScene: 渲染场景，读取initialRouter传来的数据，确定显示那些内容。 * */ render() { return ( <Navigator ref='navigator' style={styles.navigator} configureScene={this.configureScene} renderScene={this.renderScene} initialRoute={{ component: Splash, name: 'Splash' }} /> ); } } /** * 弹性（Flex）宽高: * * 使用flex:1来指定某个组件扩张以撑满所有剩余的空间 *如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。 * 如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大 * * 注意： * 组件能够撑满剩余空间的前提是其父容器的尺寸不为零。 * */ let styles = StyleSheet.create({ navigator: { flex: 1 } }); export default Welcome;

定时器的实现

1.定一个Splash.js文件

2.在构造器中获取导航器Navigator对象

3.设计定时，实现界面跳转

Splash.js文件代码：

import React from 'react'; import { Dimensions, Image, InteractionManager, View, Text, } from 'react-native'; import AppMain from './page/AppMain.js'; /**获取手机屏幕的宽和高*/ var {height, width} = Dimensions.get('window'); class Splash extends React.Component { /*** * 构造器 * 开始了一个定时器setTimeout（），2500豪秒后跳转到AppMain.js * @param props */ constructor(props) { super(props); //获取navigator对象，在welcome.js传过来的 const {navigator} = props;//可以 //const {navigator} =this. props;//可以 //const {navigator} = this.props.navigator;//这个是不可以的，会报错 //const {navigator} = props.navigator;//这个是不可以的，会报错 this.timer = setTimeout(() => { InteractionManager.runAfterInteractions(() => { navigator.resetTo({ component: AppMain, name: 'AppMain' }); }); }, 2500); } /** * 渲染界面，只有一张图片 * @returns {XML} */ render() { return ( <View style={{flex:1}}> <Image style={{flex:1,width:width,height:height}} source={require('./image/ic_welcome.png')} /> </View> ); } } export default Splash;

3.修改index.android.js文件

/**这里是导包，导入我们要使用的控件*/ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; /**导入一个自己写的js文件*/ import Welcome from './app/page/Welcome.js'; // 注册应用(registerComponent)后才能正确渲染 // 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册 AppRegistry.registerComponent('reactNativeTest', () => Welcome);

4.运行

1.来到项目根目录，打开cmd

2.执行：

react-native start

3.来到项目根目录，打开新的cmd

4.执行：

react-native run-android

5.效果：

3.实现首页

1.定一个AppMain.js文件

2.监听点击返回按钮

BackAndroid.addEventListener('hardwareBackPress', xxxxx);

3.实现顶部导航栏

<View style={styles.headerMenu}> <View style={{flex:1,justifyContent:'center'}}> <TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}> <View style={{justifyContent:'flex-start',flexDirection:'row',alignItems:'center'}}> <Image source={require('../image/hotel_ic_home.png')} style={{width:20,height:26,marginLeft:8}}/> </View> </TouchableOpacity> </View> <View style={{flex:1,alignItems:'center',justifyContent:'center'}}> <Text style={{fontSize: 20, textAlign: 'center'}} >首页 </Text> </View> <View style={{justifyContent:'flex-end',alignItems:'center',flex:1,flexDirection:'row'}}> <TouchableOpacity onPress={()=>{this.onClickTitleBar(1)}}> <Image source={require('../image/ic_action_search.png')} style={{width:24,height:24,marginRight:8,alignItems:'center'}}/> </TouchableOpacity> </View> </View>

4.实现:ViewPagerAndroid

<ViewPagerAndroid ref={viewPager => { this.viewPager = viewPager; }} style={styles.flex1} initialPage={0} pageMargin={0}> <View style={styles.page}> <Text>Page 1</Text> </View> <View style={styles.page}> <Text>Page 2</Text> </View> <View style={styles.page}> <Text>Page 3</Text> </View> </ViewPagerAndroid>

5.实现底部导航栏:

<View style={styles.footerMenu}> <TouchableOpacity onPress={() => this.onClick(1)}> <Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} /> <Text style={styles.welcome} >首页 </Text> </TouchableOpacity> <TouchableOpacity onPress={() => this.onClick(2)}> <Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} /> <Text style={styles.welcome} >商城 </Text> </TouchableOpacity> <TouchableOpacity onPress={() => this.onClick(3)} > <Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/> <Text style={styles.welcome} >个人中心 </Text> </TouchableOpacity> </View>

6.实现点击事件：TouchableOpacity

<TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}> ..... </TouchableOpacity>

AppMain.js文件代码：

/**导包*/ import React from 'react'; import { StyleSheet, Navigator, StatusBar, BackAndroid, View, Text, Platform , AppRegistry, ViewPagerAndroid, TouchableOpacity, Image, } from 'react-native'; /**导包*/ import { NaviGoBack } from '../utils/CommonUtils'; var _navigator; class AppMain extends React.Component { constructor(props) { super(props); this.goBack = this.goBack.bind(this); //监听返回事件 BackAndroid.addEventListener('hardwareBackPress', this.goBack); } /** * 点击返回上一个界面的函数 * @returns {*} */ goBack() { return NaviGoBack(_navigator); } /** * 处理点击事件的函数 * @param page */ onClick(page) { this.viewPager.setPage(page - 1); } /** * 处理点击事件的函数 * @param page */ onClickTitleBar(numer){ this.viewPager.setPage(numer - 1); } /** * 渲染界面 * @returns {XML} */ render() { return ( <View style={styles.flex1}> <View style={styles.headerMenu}> <View style={{flex:1,justifyContent:'center'}}> <TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}> <View style={{justifyContent:'flex-start',flexDirection:'row',alignItems:'center'}}> <Image source={require('../image/hotel_ic_home.png')} style={{width:20,height:26,marginLeft:8}}/> </View> </TouchableOpacity> </View> <View style={{flex:1,alignItems:'center',justifyContent:'center'}}> <Text style={{fontSize: 20, textAlign: 'center'}} >首页 </Text> </View> <View style={{justifyContent:'flex-end',alignItems:'center',flex:1,flexDirection:'row'}}> <TouchableOpacity onPress={()=>{this.onClickTitleBar(1)}}> <Image source={require('../image/ic_action_search.png')} style={{width:24,height:24,marginRight:8,alignItems:'center'}}/> </TouchableOpacity> </View> </View> <Text style={styles.line}></Text> <ViewPagerAndroid ref={viewPager => { this.viewPager = viewPager; }} style={styles.flex1} initialPage={0} pageMargin={0}> <View style={styles.page}> <Text>Page 1</Text> </View> <View style={styles.page}> <Text>Page 2</Text> </View> <View style={styles.page}> <Text>Page 3</Text> </View> </ViewPagerAndroid> <Text style={styles.line}></Text> <View style={styles.footerMenu}> <TouchableOpacity onPress={() => this.onClick(1)}> <Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} /> <Text style={styles.welcome} >首页 </Text> </TouchableOpacity> <TouchableOpacity onPress={() => this.onClick(2)}> <Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} /> <Text style={styles.welcome} >商城 </Text> </TouchableOpacity> <TouchableOpacity onPress={() => this.onClick(3)} > <Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/> <Text style={styles.welcome} >个人中心 </Text> </TouchableOpacity> </View> </View> ); } } /** * 属性介绍： * * flexDirection: * * style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向 * * justifyContent: * *style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between * * alignItems: * * 在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。 * * backgroundColor 背景颜色 * * borderColor 边界颜色 */ var styles = { flex1: { flex: 1, }, page: { alignItems: 'center', flexDirection: 'row', flex: 1, justifyContent: 'center', //borderWidth: 1, borderColor: 'black', }, headerMenu: { flexDirection: 'row', backgroundColor: '#F2F2F2', height: 50, paddingHorizontal: 10, }, footerMenu: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#F2F2F2', height: 60, paddingHorizontal: 40, }, img: { alignItems: 'center', justifyContent: 'center', width:90, height:90 }, welcome: { fontSize: 10, textAlign: 'center', }, line: { backgroundColor: '#cdcdcd', height: 1, }, } export default AppMain;

6.运行