Commit 6f565d8e by leiyongsheng

修正rn导航

parent 27d346e0
android @ c1da0671
Subproject commit 0d1c0f28436083a4e7fbc31ab9d4fab192013f7b Subproject commit c1da067129625f2a7694bb1ccdf7efcb226b980c
ios @ 068d46e2
Subproject commit 99d915704d99fe729baacebcfc5e24e666e20e68 Subproject commit 068d46e210861b0b45160b9696df3031527cd46d
import { Image, View } from 'react-native';
import { HeaderBackButton } from '@react-navigation/stack';
import { IC_BACK_BLACK } from '../assets/images'
export default BackButton = (props) => (
<HeaderBackButton
{...props}
backImage={() => (
<View style={{ paddingStart: 5, paddingEnd: 10, paddingTop: 10, paddingBottom: 10 }}>
<Image source={IC_BACK_BLACK} style={{ width: 10, height: 18 }} />
</View>
)}
/>
);
\ No newline at end of file
import React from 'react' import React, { useState } from "react";
import { View, Text } from 'react-native' import { Button, Text, StyleSheet, StatusBar, View } from "react-native";
import styles from './index.scss' import { HEADER_HEIGHT } from "../../config"
const StatusHeader = (props) => {
const styleTypes = ['default', 'dark-content', 'light-content'];
const [visibleStatusBar, setVisibleStatusBar] = useState(false);
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[0]);
const changeVisibilityStatusBar = () => {
setVisibleStatusBar(!visibleStatusBar);
};
const changeStyleStatusBar = () => {
const styleId = styleTypes.indexOf(styleStatusBar) + 1;
if (styleId === styleTypes.length) {
return setStyleStatusBar(styleTypes[0]);
}
return setStyleStatusBar(styleTypes[styleId]);
};
const StatusView = ({
loading = true,
empty = false,
error = false,
// 是否填充
fill = true,
loadingText = '加载中...',
errorText = '加载失败了',
emptyText = '暂无相关数据',
emptyIcon = null,
errorIcon = null,
onClick = null,
style = {},
children = null,
}) => {
return ( return (
<View style={[styles.statusContainer, fill ? styles.full : null]}> <View style={styles.container}>
{children ? children : <Text>加载中...</Text>} <View>
<Text style={styles.textStyle}>StatusBar Style: {styleStatusBar}</Text>
<Text style={styles.textStyle}>StatusBar Visibility: {!visibleStatusBar ? 'Visible' : 'Hidden'}</Text>
</View>
<StatusBar backgroundColor="blue" barStyle={styleStatusBar} />
<View>
<StatusBar hidden={visibleStatusBar} />
</View>
<View style={styles.buttonContainer}>
<Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />
</View>
<View style={styles.buttonContainer}>
<Button title="Change StatusBar Style" onPress={() => changeStyleStatusBar()} />
</View>
</View> </View>
) );
} };
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: HEADER_HEIGHT,
backgroundColor: '#ECF0F1',
padding: 8
},
buttonContainer: {
padding: 10
},
textStyle: {
textAlign: 'center'
}
});
export default StatusView export default StatusHeader;
import { NativeModules } from 'react-native'; import { NativeModules, StatusBar, Dimensions } from 'react-native';
const { BMCInfo: { getEnvInfo } } = NativeModules; const { BMCInfo: { getEnvInfo } } = NativeModules;
const dev = { const dev = {
API_ROOT: 'http://devbmcapp.hikcreate.com', API_ROOT: 'http://devbmcapp.hikcreate.com',
...@@ -30,9 +30,36 @@ const configs = [ ...@@ -30,9 +30,36 @@ const configs = [
] ]
let envInfo let envInfo
export default getEnv = async () => { export const getEnv = async () => {
if (!envInfo) { if (!envInfo) {
envInfo = await getEnvInfo(); envInfo = await getEnvInfo();
} }
return configs[envInfo.env]; return configs[envInfo.env];
} }
\ No newline at end of file
// iPhone X、iPhone XS
const X_WIDTH = 375;
const X_HEIGHT = 812;
// iPhone XR、iPhone XS Max
const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;
const DEVICE_SIZE = Dimensions.get('window');
const { height: D_HEIGHT, width: D_WIDTH } = DEVICE_SIZE;
export const isiOS = () => Platform.OS === 'ios'
export const isiPhoneX = () => {
return (
isiOS() &&
((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
(D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT)) ||
((D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
(D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
);
};
export const HEADER_HEIGHT = 44
export const STATUS_BAR_HEIGHT = isiOS() ? (isiPhoneX() ? 34 : 20) : StatusBar.currentHeight
\ No newline at end of file
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* */ * */
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { TextInput, Text, TouchableHighlight, View, NativeModules, StatusBar, Platform } from 'react-native'; import { TextInput, Text, TouchableHighlight, View, NativeModules, StatusBar } from 'react-native';
// import Tabbar from '../../components/Tabbar'; // import Tabbar from '../../components/Tabbar';
import { user as userServices } from '../../services'; import { user as userServices } from '../../services';
import styles from './style'; import styles from './style';
...@@ -36,6 +36,7 @@ const Equipment = () => { ...@@ -36,6 +36,7 @@ const Equipment = () => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<StatusBar translucent={false} backgroundColor='#fff' barStyle="dark-content" />
<View> <View>
<TextInput <TextInput
style={styles.input} style={styles.input}
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* */ * */
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { ScrollView, View, Text, SafeAreaView, NativeModules, FlatList } from 'react-native'; import { ScrollView, View, Text, SafeAreaView, NativeModules, FlatList, StatusBar } from 'react-native';
// import Tabbar from '../../components/Tabbar'; // import Tabbar from '../../components/Tabbar';
import { equiment as equimentServices } from '../../services'; import { equiment as equimentServices } from '../../services';
import styles from './style'; import styles from './style';
...@@ -32,6 +32,7 @@ const Equipment = () => { ...@@ -32,6 +32,7 @@ const Equipment = () => {
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<StatusBar translucent={false} backgroundColor='#fff' barStyle="dark-content" />
<FlatList <FlatList
style={styles.content} style={styles.content}
data={equimentList} data={equimentList}
......
import React from 'react' import React from 'react'
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { NativeModules } from 'react-native'; import { NativeModules, Image, View } from 'react-native';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack'; import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { IC_BACK_BLACK } from '../assets/images'
import { HEADER_HEIGHT } from '../config'
import Equipment from '../pages/Equipment' import Equipment from '../pages/Equipment'
import ChangeNickname from '../pages/ChangeNickname' import ChangeNickname from '../pages/ChangeNickname'
...@@ -18,6 +20,11 @@ function AllStack(props) { ...@@ -18,6 +20,11 @@ function AllStack(props) {
const headerLeft = (props) => ( const headerLeft = (props) => (
<HeaderBackButton <HeaderBackButton
{...props} {...props}
backImage={() => (
<View style={{ paddingStart: 5, paddingEnd: 10, paddingTop: 10, paddingBottom: 10 }}>
<Image source={IC_BACK_BLACK} style={{ width: 10, height: 18 }} />
</View>
)}
onPress={() => { onPress={() => {
exit() exit()
}} }}
...@@ -25,24 +32,20 @@ function AllStack(props) { ...@@ -25,24 +32,20 @@ function AllStack(props) {
); );
return ( return (
<Stack.Navigator initialRouteName={pathMap[path] || 'changeNickname'}> <Stack.Navigator initialRouteName={pathMap[path] || 'changeNickname'}
<Stack.Screen options={{ screenOptions={{
title: '常用设备',
headerLeft: headerLeft, headerLeft: headerLeft,
headerTitleStyle: { headerStyle: {
flex: 1, height: HEADER_HEIGHT, // Specify the height of your custom header
justifyContent: 'center',
alignItems: "center"
}, },
}} name="equiment" component={Equipment} />
<Stack.Screen options={{
title: '修改昵称',
headerLeft: headerLeft,
headerTitleStyle: { headerTitleStyle: {
flex: 1, alignItems: "center",
justifyContent: 'center' fontSize: 18
}, },
}} name="changeNickname" component={ChangeNickname} /> headerTitleAlign: "center"
}}>
<Stack.Screen options={{ title: '常用设备', }} name="equiment" component={Equipment} />
<Stack.Screen options={{ title: '修改昵称' }} name="changeNickname" component={ChangeNickname} />
</Stack.Navigator> </Stack.Navigator>
); );
} }
......
const { BMCUI } = NativeModules; const { BMCUI } = NativeModules;
import { NativeModules } from 'react-native'; import { NativeModules } from 'react-native';
import getEnv from '../config' import { getEnv } from '../config'
const { BMCInfo: { getLoginInfo, getDeviceInfo } } = NativeModules; const { BMCInfo: { getLoginInfo, getDeviceInfo } } = NativeModules;
......
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 to comment