React-Native 之 GD (一)目录结构与第三方框架使用与主题框架搭建
2024-08-30 10:48:50
1.APP效果图
2.工程环境配置
IOS:
- 将压缩包内的 Images.xcassets 文件夹直接替换掉我们iOS工程中的 Images.xcassets 文件夹。
- 这时候我们可以看到所有图片资源已经成功导入到iOS工程中,接着我们点击工程文件进行一些必要的配置。
General
——App Icons and Launch Images
—— 修改Launch Images Source
为Images.xcassets
文件夹内的 LaunchImage ,清除Launch Screen File
内容。General
——Deployment Info
——Device Orientation
—— 只保留 Portrait 选项。- 打开 info.plist 文件,找到 Bundle name 选项,将其内容修改为 逛丢学习
- 打开 info.plist 文件,找到 App Transport Security Settings 选项,给其添加 Allow Arbitrary Loads 选项并设置内容为 YES (如果使用
IPV6标准
可以忽略这一步) - OK,至此 iOS 端配置完毕。
Android:
- 将压缩包内的 drawable-xxhdpi 文件夹复制粘贴到 GD/android/app/src/main/res/ 中。
设置 APP图标 进入 GD/Android/app/src/main 打开 AndroidManifest 文件,修改 android:icon 项,如下:
<application>
android:icon="@drawable/icon"
</application>
设置 APP名称 进入 GD/android/app/src/main/res/values/ 中,打开 strings.xml 文件,做如下修改:
<resources>
<string name="app_name">逛丢</string>
</resources>
3.主体框架搭建
创建Main.js, 通过此文件连接其他文件
index.android.js
/**
* Android
*/
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native'; // 引入外部文件(主页面)
import Main from './app/main/GDMain'; export default class GD extends Component {
render() {
return (
<Main />
);
}
} AppRegistry.registerComponent('GD', () => GD);
index.ios.js
/**
* IOS
*/
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native'; // 引入外部文件(主页面)
import Main from './app/main/GDMain'; export default class GD extends Component {
render() {
return (
<Main />
);
}
} AppRegistry.registerComponent('GD', () => GD);
// 下载第三方框架
$ npm install react-native-tab-navigator --save
$ npm install react-native-deprecated-custom-components --save
// 引用第三方框架
import TabNavigator from 'react-native-tab-navigator'; import CustomerComponents, {
Navigator
} from 'react-native-deprecated-custom-components';
Main.js
/**
* 主页面
* 通过此文件连接其他文件
*/
import React, {
Component
} from 'react';
import {
StyleSheet,
Text,
View,
Image,
Platform
} from 'react-native'; // tab组件(第三方框架)
import TabNavigator from 'react-native-tab-navigator';
// 导航器
import CustomerComponents, {
Navigator
} from 'react-native-deprecated-custom-components'; // 引入其他组件
import Home from '../home/GDHome';
import HT from '../ht/GDHt';
import HourList from '../hourList/GDHourList'; export default class GD extends Component {
// ES6
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
selectedTab: 'home',
};
} // 返回TabBar的Item
renderTabBarItem(title, selectedTab, image, selectedImage, component) {
return (
<TabNavigator.Item
selected={this.state.selectedTab === selectedTab}
title={title}
selectedTitleStyle={{color:'black'}}
renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
renderSelectedIcon = {() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
onPress = {() => this.setState({selectedTab: selectedTab})}>
<Navigator
// 设置路由
initialRoute = {
{
name: selectedTab,
component: component
}
} renderScene = {
(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}
} />
</TabNavigator.Item>
);
} render() {
return (
<TabNavigator>
{ /* 首页 */ }
{this.renderTabBarItem("首页", 'home', 'tabbar_home_30x30', 'tabbar_home_selected_30x30', Home)}
{ /* 海淘 */ }
{this.renderTabBarItem("海淘", 'ht', 'tabbar_abroad_30x30', 'tabbar_abroad_selected_30x30', HT)}
{ /* 小时风云榜 */ }
{this.renderTabBarItem("小时风云榜", 'hourlist', 'tabbar_rank_30x30', 'tabbar_rank_selected_30x30', HourList)}
</TabNavigator>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
tabbarIconStyle: {
width: Platform.OS === 'ios' ? 30 : 25,
height: Platform.OS === 'ios' ? 30 : 25,
}
});
GDHome.js
/**
* 首页
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
Platform
} from 'react-native'; export default class GDHome extends Component {
render() {
return (
<View style={styles.container}>
<Text>首页</Text>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
GDHourList.js
/**
* 小时风云榜
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
Platform
} from 'react-native'; export default class GDHourList extends Component {
render() {
return (
<View style={styles.container}>
<Text>小时风云榜</Text>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
GDHt.js
/**
* 海淘折扣
*/
import React, {
Component
} from 'react';
import {
StyleSheet,
Text,
View,
Image,
Platform
} from 'react-native'; export default class GDHt extends Component {
render() {
return (
<View style={styles.container}>
<Text>海淘折扣</Text>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
4.效果图
.
最新文章
- java 简单使用redis
- hdu 2489(枚举 + 最小生成树)
- can&#39;t resolve symbol &#39;R&#39; ...
- dll学习
- Ubuntu系统监控cpu memery 磁盘Io次数 IO速率 网卡 运行时间等信息的采集
- [转]简析 IOS 程序图标的设计
- 【转】iOS-Core-Animation-Advanced-Techniques(四)
- Vigen&#232;re Cipher 维吉尼亚加解密算法
- 关于web的流程
- 5.6.3.7 localeCompare() 方法
- HTML <;base>; 标签的 href 属性
- thinkphp5.0学习笔记(二)
- Git详解之九:Git内部原理
- 怎么修改kodexplorer网盘下的版权
- Codeforces Round #447 (Div. 2) B. Ralph And His Magic Field 数学
- 【python全栈开发】初识python
- Monotonic Array LT896
- Hybris IMPEX.
- ajax小知识
- Codeforces 535D - Tavas and Malekas