模拟淘宝首页
模拟淘宝首页
// react/react-native
import React from 'react'
import {
SafeAreaView,
ScrollView,
Text,
View,
Image,
StatusBar,
NativeModules,
useColorScheme,
Platform,
} from 'react-native'
// 获取安全区工具，自测只有ios好使
import {useSafeAreaInsets} from "react-native-safe-area-context";
// react-navigation
import {createStackNavigator} from "@react-navigation/stack";
const {Navigator: StackNavigator, Screen: StackScreen} = createStackNavigator();
// 页面
import Subscribe from '../../screens/Home/Subscribe';
import Recommend from '../../screens/Home/Recommend';
// 自定义HeaderLeft，Header，HeaderRight组件
import CustomHeaderLeft from './components/CustomHeaderLeft'
import CustomHeader from './components/CustomHeader'
import CustomHeaderRight from './components/CustomHeaderRight'
// 定义Navigator配置文件
const optionsConfig = (prop) => {
// 动态获取状态栏高度
const getStatusHeight:any = () => {
if (Platform.OS === 'ios') {
console.log('StatusBarMessage',useSafeAreaInsets());
return useSafeAreaInsets().top
} else {
console.log('StatusBarMessage',StatusBar.currentHeight)
// 由于安卓的header高度不包含状态栏高度，所以直接返回0，android刘海屏带测试
return 0 //StatusBar.currentHeight
}
};
return {
// 直接将prop传给组件，
// 注意 headerLeft: (prop) =>
)
};
export default HomeStack
CustomHeaderLeft
import React, {useState} from 'react'
import {
SafeAreaView,
ScrollView,
Text,
View,
Image,
StatusBar,
useColorScheme,
Platform,
StyleSheet,
TouchableWithoutFeedback
} from 'react-native'
import {Iconfont} from "../../../../assets/font";
const CustomHeaderLeft = () => {
return (
签到
)
};
const styles = StyleSheet.create({
safe:{
flex:1,
// backgroundColor:'yellow'
},
container: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: "row",
backgroundColor:'#FCEEDB',
marginTop:6,
marginBottom:6,
paddingLeft:4,
height:28,
borderRadius:14
}
})
export default CustomHeaderLeft
CustomHeader
import React, {useState} from 'react'
import {
SafeAreaView,
ScrollView,
Text,
View,
Image,
StatusBar,
NativeModules,
useColorScheme,
Platform,
StyleSheet,
TouchableOpacity,
TouchableWithoutFeedback,
Dimensions
} from 'react-native'
import CustomHeaderInput from './CustomHeaderInput'
const CustomHeader = (prop) => {
const [data, setData] = useState([
{
name: '订阅',
isActive: true
},
{
name: '推荐',
isActive: false
}
]);
const {width, height, scale} = Dimensions.get('window');
const left:number = Math.floor((width - 146-20) / 2);
// console.log('计算偏移量', width, height, scale, left)
const click: any = (i) => {
setData((data: any): any => {
return data.map((em, index) => {
if (index === i) {
em.isActive = true
} else {
em.isActive = false
}
return em
})
});
console.warn(data)
};
return (
{
data.map((em, index) => {
return (
{
click(index)
}}>
{
if (em.isActive) return styles.active;
return;
})()]}>{em.name}
)
})
}
{
const i = data.findIndex(em => em.isActive);
if (i === 0) {
return {left: 25}
} else {
return {right: 25}
}
})()]}>
)
};
const styles = StyleSheet.create({
safe: {
// flex: 1,
// backgroundColor:'gray',
},
flexCloumn: {
// flex: 1,
// display: 'flex',
// justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: "column",
// backgroundColor:'red'
},
title: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: "row",
// height: 40,
// backgroundColor: 'gray'
},
item: {
paddingLeft: 15,
paddingRight: 15,
height:40,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: "row",
},
itemActive: {},
text: {
fontSize: 20,
color:'#333'
},
positionR: {
position: 'relative'
},
positionA: {
position: 'absolute'
},
bottomLine: {
width: 24,
height: 2,
backgroundColor: '#E1613C',
borderRadius: 1,
bottom: 2,
right: 25//23
},
active: {
fontWeight: '500',
fontSize: 22,
color: '#E1613C'
}
})
export default CustomHeader
CustomHeaderRight
import React, {useState} from 'react'
import {
SafeAreaView,
ScrollView,
Text,
View,
Image,
StatusBar,
useColorScheme,
Platform,
StyleSheet,
TouchableWithoutFeedback
} from 'react-native'
import {Iconfont} from "../../../../assets/font";
const CustomHeaderLeft = ({route,navigation}) => {
return (
会员码
)
};
const styles = StyleSheet.create({
safe:{
flex:1,
height:28,
// backgroundColor:'green'
},
container: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: "row",
backgroundColor: '#FCEEDB',
marginTop: 6,
marginBottom: 6,
paddingLeft:10,
height: 28,
borderRadius: 14
}
})
export default CustomHeaderLeft
CustomHeaderInput
import React, {useState} from 'react'
import {
SafeAreaView,
ScrollView,
Text,
View,
Image,
StatusBar,
useColorScheme,
Platform,
StyleSheet,
TouchableWithoutFeedback,
TextInput,
Dimensions
} from 'react-native'
import {Iconfont} from "../../../../assets/font";
const CustomHeaderInput = ({route,navigation}) => {
const {width, height, scale} = Dimensions.get('window');
return (
{
console.log('点击事件进来了')
console.warn(navigation)
navigation.navigate('Camera')
}}>
搜索
)
};
const styles = StyleSheet.create({
safe: {
flex: 1,
},
container: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: "row",
height: 30,
borderRadius: 15,
borderWidth: 1,
borderColor: '#F41B0C',
},
input: {
flex: 1,
padding: 0
},
saoma: {
paddingLeft: 10,
paddingRight: 10
},
xiangji: {
paddingLeft: 10,
paddingRight: 10
},
button: {
width: 60,
height: 26,
backgroundColor: '#F41B0C',
borderRadius: 13,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
marginRight: 1,
},
buttonText: {
color: '#fff'
}
})
export default CustomHeaderInput