混合应用开发 / 2018级-Hybrid混合开发

import React from 'react';
import { View, ScrollView, Text, StyleSheet, TextInput,TouchableOpacity,Image } from 'react-native'
import Btn from './common/Btn'
import Icon from 'react-native-vector-icons/AntDesign';
import './common/global'

const navs = [
    { text: '记账本', name:'bank'},
    { text: '写清单', name:'bank'},
    { text: '听写',   name:'bank'},
    { text: '花涂鸦', name:'bank'},
]

const App = () => {
	return (
		<ScrollView style={styles.container}>
			<View style={{ flexDirection: 'row'}}>
				<Text style={{ fontSize: 40, fontWeight: 'bold', margin: 30 }}>便签</Text>
				<View style={styles.btn}>
					<Btn style={styles.editBtn}>编辑</Btn>
				</View>
			</View>
			<View style={{flexDirection:'row',}}>
				<View style={styles.navView}>
					<Text style={{width:60,borderBottomWidth:3,borderBottomColor:'orange',color:'orange',height:50,lineHeight:50,fontSize:18}}>文件夹</Text>
				</View>
				<View style={styles.navView}>
					<Text style={{height:50,lineHeight:50,fontSize:18}}>全部</Text>
				</View>
			</View>
			<View style={styles.searchbar}>
                <View style={styles.searchbox}>
                    <Icon size={30} name="search1" />
                    <TextInput placeholder='搜索便签' style={styles.input}></TextInput>
                </View>
            </View>
			<View style={styles.navBox}>
                {
                    navs.map((nav) => (
                        <TouchableOpacity key={nav.text} style={[styles.nav]} onPress={() => console.log(nav.text)}>
                            {/* <Image source={nav.img} style={{ width: ptd(37), height: ptd(37) }}></Image> */}
							<Icon size={50} name={nav.name}></Icon>
                            <Text>{nav.text}</Text>
                        </TouchableOpacity>
                    ))
                }
            </View>
			<View style={{alignItems:'center',marginTop:20,}}>
				<View style={styles.con}>
					<Text>oh my God</Text>
					<Text>17:15</Text>
				</View>
				<View style={styles.con}>
					<Text>oh my God</Text>
					<Text>17:15</Text>
				</View>
				<View style={styles.con}>
					<Text>oh my God</Text>
					<Text>17:15</Text>
				</View>
				<View style={styles.con}>
					<Text>oh my God</Text>
					<Text>17:15</Text>
				</View>
			</View>
		</ScrollView>
	)
};

export default App;

const styles = StyleSheet.create({
	con:{
		width:'85%',
		height:80,
		marginTop:5,
		backgroundColor:'#eee',
		borderRadius:10,
		justifyContent:'center'
	},
	navBox: {
        flexDirection: 'row',
        flexWrap: 'wrap',

    },
	nav:{
		width:'25%',
		alignItems: 'center',
        paddingTop: 20,
	},
	searchbar: {
        alignItems: 'center',
        height: 45,
		marginTop:10
    },
    searchbox: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '90%',
        height: 45,
        paddingLeft: 11,
        paddingRight: 11,
        borderRadius: 30,
        backgroundColor: '#eee'
    },
    input: {
        height: 45,
        paddingLeft: 15,
        flex: 1,
    },
	navView:{
		width:'50%',
		// borderWidth:2,
		justifyContent:'center' ,
		alignItems:'center',
		borderBottomWidth:1
	},
	container: {
		flex: 1,
	},
	btn:{
		width:'70%',
		// borderWidth: 2,
		alignItems:'flex-end',
		justifyContent:'center',
	},
	editBtn: {
        width: 100,
        height: 50,
        // borderWidth:3,
		lineHeight:50
    },
})