Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit 88754c62 by wong.peiyi
Options

兼容各种屏幕大小

parent bdf20a44
Expand all
Inline Side-by-side
Showing with 412 additions and 63 deletions
App.js → App.tsx
......@@ -6,12 +6,16 @@
* @flow
*/
import React, { Component } from 'react'
import { Text, TextInput } from 'react-native'
import { Text, TextInput, View } from 'react-native'
import { Provider } from 'react-redux'
import CodePush from 'react-native-code-push'
import configureStore from './app/store/configureStore'
import Router from './app/Router'
import { show } from './app/utils/Utils'
// 旧版本,之前的版本用这个打包
// import Router from './app/Router'
// 重构后版本, 计划从2.0.0开始
import Router from './src/Router'
const store = configureStore()
// 字体不随系统字体变化 首字母不大写
......@@ -48,26 +52,26 @@ class App extends Component {
//ON_NEXT_RESUME 下次恢复到前台时
//ON_NEXT_RESTART 下一次重启时
//IMMEDIATE 马上更新
installMode : CodePush.InstallMode.IMMEDIATE ,
installMode: CodePush.InstallMode.IMMEDIATE,
//对话框
updateDialog : {
updateDialog: {
//是否显示更新描述
appendReleaseDescription : false ,
appendReleaseDescription: false,
//更新描述的前缀。 默认为"Description"
descriptionPrefix : "更新内容：" ,
descriptionPrefix: '更新内容：',
//强制更新按钮文字，默认为continue
mandatoryContinueButtonLabel : "立即更新" ,
mandatoryContinueButtonLabel: '立即更新',
//强制更新时的信息. 默认为"An update is available that must be installed."
mandatoryUpdateMessage : "必须更新后才能使用" ,
mandatoryUpdateMessage: '必须更新后才能使用',
//非强制更新时，按钮文字,默认为"ignore"
optionalIgnoreButtonLabel : '稍后' ,
optionalIgnoreButtonLabel: '稍后',
//非强制更新时，确认按钮文字. 默认为"Install"
optionalInstallButtonLabel : '后台更新' ,
optionalInstallButtonLabel: '后台更新',
//非强制更新时，检查到更新的消息文本
optionalUpdateMessage : '有新版本了，是否更新？',
optionalUpdateMessage: '有新版本了，是否更新？',
//Alert窗口的标题
title : '更新提示'
}
title: '更新提示',
},
})
}
......
app/Router.js
......@@ -32,7 +32,7 @@ const Router = createAppContainer(createStackNavigator({
ChooseProductPage: {screen: ChooseProductPage},
EditThirdLevelPage: {screen: EditThirdLevelPage},
EquipConsuPage: {screen: EquipConsuPage},
ConsumDetailsPage: {screen: ConsumDetailsPage},
ConsumDetailsPage: {screen: ConsumDetailsPage},
ChargeDetailsPage: {screen: ChargeDetailsPage},
FillUnitPricePage: {screen: FillUnitPricePage},
ShowDetailPage: {screen: ShowDetailPage},
......@@ -94,4 +94,4 @@ const Router = createAppContainer(createStackNavigator({
// return defaultGetStateForAction(action, state)
// })
export default Router
\ No newline at end of file
export default Router
index.js
/**
* @format
*/
import { AppRegistry } from 'react-native'
import App from './App'
import { name as appName } from './app.json'
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName, () => App)
ios/BoneHouse_Business_APP.xcodeproj/project.pbxproj
......@@ -365,6 +365,13 @@
remoteGlobalIDString = F886647B1F4ADB500036D01B;
remoteInfo = "CodePush-tvOS";
};
ABF4B26F26205197009952BC /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = A45E12D6491A4DF4ADC867FE /* RNGestureHandler.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = B5C32A36220C603B000FFB8D;
remoteInfo = "RNGestureHandler-tvOS";
};
ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
......@@ -533,6 +540,8 @@
2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,
2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,
A32499D5AE884F6F872774E4 /* libRNGestureHandler-tvOS.a in Frameworks */,
9DB83891E1BB4380A918C3D6 /* libRNReanimated-tvOS.a in Frameworks */,
1C61F8D58B494A22BDF314C6 /* libRNScreens-tvOS.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
......@@ -839,6 +848,12 @@
6150E1F0F80C4DD8AC8EC136 /* libRNFS.a */,
99185D2E8C7346169CA04346 /* libRNFetchBlob.a */,
FBA93B007474490392AE8046 /* libCodePush.a */,
257C213588964AC3A322A2AE /* libRNCMaskedView.a */,
16908D168F484E1AA17F636F /* libRNReanimated.a */,
24E634A059994D41928D5CB6 /* libRNCSafeAreaContext.a */,
93C9425DA9724E5D9E6A3EFE /* libRNScreens.a */,
0D17A99CC53847B3B66CA57F /* libRNReanimated-tvOS.a */,
23A14AC09CF84823AF109770 /* libRNScreens-tvOS.a */,
);
name = "Recovered References";
sourceTree = "<group>";
......@@ -855,6 +870,7 @@
isa = PBXGroup;
children = (
ECD74ECB2474DDFC005B4208 /* libRNGestureHandler.a */,
ABF4B27026205197009952BC /* libRNGestureHandler-tvOS.a */,
);
name = Products;
sourceTree = "<group>";
......@@ -1374,6 +1390,27 @@
remoteRef = ABB463F225F0C45400F9E705 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
ABF4B27026205197009952BC /* libRNGestureHandler-tvOS.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = "libRNGestureHandler-tvOS.a";
remoteRef = ABF4B26F26205197009952BC /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
ABF4B28526205197009952BC /* libRNScreens-tvOS.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = "libRNScreens-tvOS.a";
remoteRef = ABF4B28426205197009952BC /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
ABF4B28D26205197009952BC /* libRNReanimated-tvOS.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = "libRNReanimated-tvOS.a";
remoteRef = ABF4B28C26205197009952BC /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
......@@ -1614,10 +1651,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......@@ -1655,10 +1688,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......@@ -1804,10 +1833,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......@@ -1851,10 +1876,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......@@ -1896,10 +1917,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......@@ -1941,10 +1958,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......@@ -2188,10 +2201,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......@@ -2233,10 +2242,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......@@ -2278,10 +2283,6 @@
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
......
package.json
......@@ -35,16 +35,20 @@
"@babel/core": "^7.4.5",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/runtime": "^7.4.5",
"@types/jest": "^26.0.22",
"@types/react": "^17.0.3",
"@types/react-native": "^0.64.2",
"@types/react-test-renderer": "^17.0.1",
"babel-jest": "^24.8.0",
"babel-plugin-module-resolver": "^4.1.0",
"jest": "^24.8.0",
"jetifier": "^1.6.6",
"metro-react-native-babel-preset": "^0.65.2",
"react-native-gesture-handler": "1.0.5",
"react-native-gesture-handler": "^1.10.3",
"react-native-stylus-transformer": "^1.2.0",
"react-test-renderer": "16.8.3",
"typescript": "^4.2.3"
"stylus": "^0.54.8",
"typescript": "^4.2.4"
},
"jest": {
"preset": "react-native"
......
src/Router.tsx 0 → 100644
import React, { Component } from 'react'
import { View, Text, Image } from 'react-native'
import {
createAppContainer,
createStackNavigator,
createMaterialTopTabNavigator,
createSwitchNavigator,
} from 'react-navigation'
import { font_family_regular, first_text_color } from './assets/styles/base'
import Resolution from './components/common/Resolution'
import Home from './pages/Home'
import Mine from './pages/Mine'
import Signin from './pages/Signin'
function createNavigator() {
const options = {
navigationOptions: {
gesturesEnabled: true,
},
headerMode: 'none',
}
const TabNavigator = createMaterialTopTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: '业务',
tabBarIcon: ({ focused }) => (
<Image
source={
focused
? require('../app/images/tab_mod_sel.png')
: require('../app/images/tab_mod_def.png')
}
/>
),
},
},
Mine: {
screen: Mine,
navigationOptions: {
tabBarLabel: '我',
tabBarIcon: ({ focused }) => (
<Image
source={
focused
? require('../app/images/tab_his_sel.png')
: require('../app/images/tab_his_def.png')
}
/>
),
},
},
},
{
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
style: {
height: 90,
backgroundColor: '#fff',
borderTopWidth: 0.5,
borderTopColor: '#ddd',
},
labelStyle: { color: first_text_color, fontFamily: font_family_regular },
showIcon: true,
indicatorStyle: {
backgroundColor: 'transparent',
},
},
}
)
const SwitchNavigator = createSwitchNavigator({
Main: { screen: TabNavigator },
Signin: { screen: Signin },
})
const stackNavigator = createStackNavigator(
{
Main: { screen: SwitchNavigator },
},
{ initialRouteName: 'Main', ...options }
)
return createAppContainer(stackNavigator)
}
export default function () {
const Navigation = createNavigator()
return (
<Resolution.FixWidthView>
<Navigation />
</Resolution.FixWidthView>
)
}
src/assets/styles/base.ts 0 → 100644
import {
Dimensions
} from 'react-native'
const { width, height } = Dimensions.get('window');
export const getHeight = () => {
return height
};
export const getWidth = () => {
return width
};
// UI 默认图是414*896
const uiWidthPx = 414;
const uiHeightPx = 896;
export function pxSize(uiElementPx) {
return uiElementPx * getWidth() / uiWidthPx;
}
export function pxHeight(uiElementPx) {
return uiElementPx * getHeight() / uiHeightPx;
}
// 背景色
export const primary_color = "#007EFF"; // 主色
export const foundation_color = "#ffffff"; // 底色
export const promary_shadow_color = "#3CA2FF"; // 按钮阴影色
export const home_background_color = "#F7F7F7"; // 背景色
export const btn_sub_color = "#0296F7"; // 按钮色
export const dis_sub_color = "#BBBBBB"; // 禁用按钮色
// 字体色
export const primary_text_color = "#000000"; // 主字颜色
export const title_text_color = "#ffffff"; // 标题颜色
export const placehold_text_color = "#919191"; // input placeholder颜色
export const first_text_color = '#333333'; // 一级字体
export const second_text_color = "#666666"; // 次级字体
export const third_text_color = "#999999"; // 三级字体
export const point_color = "#ff0000"; // * 颜色
export const text_default_color = "#01B2B9"; // 默认颜色
export const text_audit_color = "#FF0000"; // 拒绝颜色
export const text_return_color = "#007EFF"; // 归还颜色
export const text_other_color = "#F4B61B"; // 其他颜色
export const list_tit_color = 'rgba(0, 0, 0, 0.87)'; // 列表标题颜色
export const list_str_color = "#0CB4E8"; // 列表加粗颜色
export const list_one_color = "#1B40B5"; // 列表一级颜色
export const list_thr_color = "#3B4C82"; // 列表其他颜色
export const list_one_light_color = "#3c64e2"; // 列表一级较浅颜色
// 字号
export const first_text_size = 20; // 一级字号
export const second_text_size = 16; // 二级字号
export const third_text_size = 12; // 三级字号
// 字体样式
export const font_family_semibold = "PingFangSC-Semibold";
export const font_family_medium = "PingFangSC-Medium";
export const font_family_regular = "PingFangSC-Regular";
export const font_family_light = "PingFangSC-Light";
export const header_height = 58
export const icon_style = {
resizeMode: 'cover',
width: '100%',
height: '100%'
}
export const safe_view = {
flex: 1
}
src/components/common/Resolution.tsx 0 → 100644
import React, { Component, PropTypes } from 'react'
import { Dimensions, Platform, PixelRatio, StatusBar, View, ScrollView } from 'react-native'
let props = {}
export default class Resolution {
static get(useFixWidth = true) {
return usefixWidth ? { ...props.fw } : { ...props.fh }
}
static setDesignSize(dWidth = 414, dHeight = 896, dim = 'window'): void {
let designSize = { width: dWidth, height: dHeight }
// let navHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 64
let navHeight = 0
let pxRatio = PixelRatio.get()
let { width, height } = Dimensions.get(dim)
if (dim != 'screen') height -= navHeight
let w = PixelRatio.getPixelSizeForLayoutSize(width)
let h = PixelRatio.getPixelSizeForLayoutSize(height)
let fwDesignScale = designSize.width / w
let fwWidth = designSize.width
let fwHeight = h * fwDesignScale
let fwScale = 1 / pxRatio / fwDesignScale
let fhDesignScale = designSize.height / h
let fhWidth = w * fhDesignScale
let fhHeight = designSize.height
let fhScale = 1 / pxRatio / fhDesignScale
props.fw = { width: fwWidth, height: fwHeight, scale: fwScale, navHeight }
props.fh = { width: fhWidth, height: fhHeight, scale: fhScale, navHeight }
console.log(props);
}
static FixWidthView(p) {
let { width, height, scale, navHeight } = props.fw
return (
<View
{...p}
style={{
marginTop: navHeight,
width: width,
height: height,
backgroundColor: 'transparent',
transform: [
{ translateX: -width * 0.5 },
{ translateY: -height * 0.5 },
{ scale: scale },
{ translateX: width * 0.5 },
{ translateY: height * 0.5 },
],
}}
>
{p.children}
</View>
)
}
static FixHeightView(p) {
let { width, height, scale, navHeight } = props.fh
return (
<View
{...p}
style={{
marginTop: navHeight,
// width: width,
height: height,
backgroundColor: 'transparent',
transform: [
{ translateX: -width * 0.5 },
{ translateY: -height * 0.5 },
{ scale: scale },
{ translateX: width * 0.5 },
{ translateY: height * 0.5 },
],
}}
>
{p.children}
</View>
)
}
}
Resolution.setDesignSize()
src/pages/Home.tsx 0 → 100644
import React, { Component } from 'react'
import { View, Text, TouchableHighlight } from 'react-native'
import slashScreen from 'react-native-splash-screen'
import Resolution from '../components/common/Resolution'
class Home extends Component {
componentDidMount() {
slashScreen.hide()
const { navigation } = this.props
// if (true) {
// navigation.navigate('Signin')
// }
}
render() {
const { navigation } = this.props
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<TouchableHighlight
onPress={() => {
navigation.navigate('Signin', {})
}}
>
<Text style={{ fontSize: 18 }}>Home Screen</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
navigation.navigate('Signin', {})
}}
>
<Text style={{ fontSize: 18 }}>Home Screen</Text>
</TouchableHighlight>
</View>
)
}
}
export default Home
src/pages/Mine.tsx 0 → 100644
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class Mine extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 18 }}>Mine Screen</Text>
</View>
)
}
}
export default Mine
src/pages/Signin.tsx 0 → 100644
import React, { Component } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import Resolution from '../components/common/Resolution'
class Signin extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Main')}>
<Text style={{ fontSize: 18 }}>Signin Screen</Text>
</TouchableOpacity>
</View>
)
}
}
export default Signin
tsconfig.json 0 → 100644
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext",
"rootDir": ".",
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment