Skip to content

F
FZUStudyRoom

软件工程实践2022年春W班 / 穿梭在银河的火箭队 / FZUStudyRoom

通知 12
Star 0
Fork 0
F
FZUStudyRoom

体验新版 GitCode，发现更多精彩内容 >>

提交 42b58d76 编写于 作者: qq_45757468's avatar qq_45757468
浏览文件
操作

整体样式美化

上级 79a6a222
隐藏空白更改
内联 并排
Showing with 429 addition and 696 deletion
android/app/src/main/AndroidManifest.xml
浏览文件 @ 42b58d76
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
android:label="@string/app_name" android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask" android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize" android:windowSoftInputMode="stateAlwaysHidden|adjustPan"
android:exported="true"> android:exported="true">
<intent-filter> <intent-filter>
<action android:name="android.intent.action.MAIN" /> <action android:name="android.intent.action.MAIN" />
......
component/Map/App.js 已删除 100644 → 0
浏览文件 @ 79a6a222
// In App.js in a new project
import * as React from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen12</Text>
</View>
// <View>
// <Home />
// </View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
component/Map/ExampleOne.js 已删除 100644 → 0
浏览文件 @ 79a6a222
import React, {Component} from 'react';
import {Dimensions, Image, StyleSheet, View} from 'react-native';
import {Table, Row, Rows} from 'react-native-table-component';
const {width, height} = Dimensions.get('window');
export default class ExampleOne extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['教室', '空余位置', '容量', '教师类型'],
tableData: [
['1', '2', '3', '4'],
['a', 'b', 'c', 'd'],
['1', '2', '3', '456\n789'],
['a', 'b', 'c', 'd'],
],
};
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
<Row
data={state.tableHead}
style={styles.head}
textStyle={styles.text}
/>
<Rows data={state.tableData} textStyle={styles.text} />
</Table>
<Image
source={require('../../images/Map/推荐图片1.jpg')}
style={{
width: (width - 15) / 2,
height: width / 3,
borderRadius: 20,
margin: 20,
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff'},
head: {height: 40, backgroundColor: '#f1f8ff'},
text: {margin: 2, textAlign: 'center', fontWeight: '100'},
});
component/Map/ExampleThree.js 已删除 100644 → 0
浏览文件 @ 79a6a222
import React, {Component} from 'react';
import {StyleSheet, View, ScrollView} from 'react-native';
import {Table, TableWrapper, Row} from 'react-native-table-component';
export default class ExampleThree extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['教室', '空余位置', '容量', '教师类型'],
widthArr: [40, 60, 80, 100],
};
}
render() {
const state = this.state;
const tableData = [];
for (let i = 0; i < 30; i += 1) {
const rowData = [];
for (let j = 0; j < 9; j += 1) {
rowData.push(`${i}${j}`);
}
tableData.push(rowData);
}
return (
<View style={styles.container}>
<ScrollView horizontal={true}>
<View>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
<Row
data={state.tableHead}
widthArr={state.widthArr}
style={styles.header}
textStyle={styles.text}
/>
</Table>
<ScrollView style={styles.dataWrapper}>
<Table borderStyle={{borderWidth: 1, borderColor: '#C1C0B9'}}>
{tableData.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={state.widthArr}
style={[
styles.row,
index % 2 && {backgroundColor: '#F7F6E7'},
]}
textStyle={styles.text}
/>
))}
</Table>
</ScrollView>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff'},
header: {height: 50, backgroundColor: '#537791'},
text: {textAlign: 'center', fontWeight: '100'},
dataWrapper: {marginTop: -1},
row: {height: 40, backgroundColor: '#E7E6E1'},
});
component/Map/ExampleTwo.js 已删除 100644 → 0
浏览文件 @ 79a6a222
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {
Table,
TableWrapper,
Row,
Rows,
Col,
} from 'react-native-table-component';
export default class ExampleTwo extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['', 'Head1', 'Head2', 'Head3'],
tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
tableData: [
['1', '2', '3'],
['a', 'b', 'c'],
['1', '2', '3'],
['a', 'b', 'c'],
],
};
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<Table borderStyle={{borderWidth: 1}}>
<Row
data={state.tableHead}
flexArr={[1, 2, 1, 1]}
style={styles.head}
textStyle={styles.text}
/>
<TableWrapper style={styles.wrapper}>
<Col
data={state.tableTitle}
style={styles.title}
heightArr={[28, 28]}
textStyle={styles.text}
/>
<Rows
data={state.tableData}
flexArr={[2, 1, 1]}
style={styles.row}
textStyle={styles.text}
/>
</TableWrapper>
</Table>
</View>
);
}
}
const styles = StyleSheet.create({
container: {flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff'},
head: {height: 40, backgroundColor: '#f1f8ff'},
wrapper: {flexDirection: 'row'},
title: {flex: 1, backgroundColor: '#f6f8fa'},
row: {height: 28},
text: {textAlign: 'center'},
});
component/Map/Login/LoginView.js 0 → 100644
浏览文件 @ 42b58d76
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Dimensions,
TextInput,
Button,
Image,
TouchableOpacity,
ImageBackground,
} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
/**
* 此组件为福大教务处登录验证界面
* ReactNative 调用软键盘时将底部导航栏或者底部position样式顶飞
* 解决办法
* 根据路径
* android/app/src/main/AndroidManifest.xml，修改android:windowSoftInputMode的属性值
* 原内容 android:windowSoftInputMode="adjustResize"
* 修改后 android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
*/
const {width, height, scale} = Dimensions.get('window');
class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
username: null,
password: null,
verificationcode: null,
iconnum: true,
verify_url: 'https://jwcjwxt1.fzu.edu.cn/plus/verifycode.asp?n=',
};
}
changeusername = text => {
this.setState({username: text});
};
changepassword = text => {
this.setState({password: text});
};
changeverificationcode = text => {
this.setState({verificationcode: text});
};
changeiconnum = () => {
this.setState({iconnum: !this.state.iconnum});
};
render() {
const {navigation} = this.props;
return (
<View style={styles.container}>
<ImageBackground
source={require('../../../images/Map/福大登录界面背景.png')}
style={{width, height: null, flex: 1}}
resizeMode="cover">
<View
style={{
// width: width / 1.5,
// height: height / 1.5,
alignItems: 'center',
justifyContent: 'center',
marginLeft: width / 5,
marginRight: width / 5,
marginTop: height / 6,
marginBottom: height / 6,
// backgroundColor: 'black',
borderColor: '#592202',
borderWidth: 3,
borderRadius: 10,
backgroundColor: '#F6ECE1',
}}>
<Text style={{color: '#592202'}}>教务处登录</Text>
<View>
<Image
source={require('../../../images/Map/福大图标.jpg')}
style={{
width: 40,
height: 40,
borderRadius: 40,
borderWidth: 2,
borderColor: 'white',
}}
/>
</View>
<View>
<TextInput
placeholder={'用户名'}
style={styles.textInputStyle}
onChangeText={text => {
this.changeusername(text);
}}
/>
</View>
<View>
<TextInput
placeholder={'密码'}
secureTextEntry={true}
selectionColor={'black'}
keyboardAppearance={'dark'}
style={styles.textInputStyle}
onChangeText={text => {
this.changepassword(text);
}}
/>
</View>
<View style={{flexDirection: 'row'}}>
<TextInput
placeholder={'验证码'}
style={styles.textInputStyle2}
onChangeText={text => {
this.changeverificationcode(text);
}}
/>
<TouchableOpacity
onPress={() => {
this.setState({
verify_url:
'https://jwcjwxt1.fzu.edu.cn/plus/verifycode.asp?n=' +
Math.random(),
});
}}>
<Image
resizeMode="contain"
source={{uri: this.state.verify_url}}
style={{
width: width * 0.2,
height: 38,
resizeMode: 'stretch',
}}
/>
</TouchableOpacity>
</View>
<TouchableOpacity
style={{
backgroundColor: '#F4D9BE',
width: width - width / 2,
marginBottom: 20,
}}
onPress={() => {
navigation.navigate('SchoolMapHome');
}}>
<Text style={{color: '#592202', textAlign: 'center'}}>登录</Text>
</TouchableOpacity>
<View style={{flexDirection: 'row', marginBottom: 5}}>
<TouchableOpacity onPress={this.changeiconnum}>
{this.state.iconnum ? (
<Icon name={'minuscircleo'} size={20} />
) : (
<Icon name={'checkcircleo'} size={20} />
)}
</TouchableOpacity>
<Text style={{fontSize: 14}}>阅读并同意用户协议和隐私政策</Text>
</View>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
flexDirection: 'column',
backgroundColor: '#dddddd',
},
iconStyle: {
width: 80,
height: 80,
marginTop: 50,
marginBottom: 30,
borderRadius: 40,
borderWidth: 2,
borderColor: 'white',
},
textInputStyle: {
width: width - width / 2,
backgroundColor: '#F6ECE1',
marginBottom: 1,
paddingLeft: 10,
textAlign: 'left',
borderBottomWidth: 1,
borderBottomColor: '#797979',
},
textInputStyle2: {
height: 38,
width: width - width / 2 - width * 0.2,
backgroundColor: '#F6ECE1',
marginBottom: 1,
paddingLeft: 10,
textAlign: 'left',
},
});
export default LoginView;
component/Map/Navigation/Mapstack.js 0 → 100644
浏览文件 @ 42b58d76
import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import LoginView from '../Login/LoginView';
import SchoolMapHome from '../SchoolMap/SchoolMapHome';
import RecommendView from '../Top/RecommendView';
import SettingView from '../Top/SettingView';
/**
* 此组件用于设置导航
*/
const Stack = createNativeStackNavigator();
function Mapstack() {
return (
<Stack.Navigator initialRouteName="LoginView">
<Stack.Screen
name="LoginView"
component={LoginView}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="SchoolMapHome"
component={SchoolMapHome}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="SettingView"
component={SettingView}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="RecommendView"
component={RecommendView}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
}
export default Mapstack;
component/Map/RadioModalItem.js 已删除 100644 → 0
浏览文件 @ 79a6a222
//没啥用，留着纪念
import React, {Component} from 'react';
import {
View,
StyleSheet,
Navigator,
TouchableHighlight,
Text,
ScrollView,
Image,
ListView,
} from 'react-native';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import RadioModal from 'react-native-radio-master';
var datas = [
{
selecteId: 13,
content: 'Apple',
selected: false,
},
{
selecteId: 14,
content: 'Banana',
selected: false,
},
{
selecteId: 15,
content: 'Orange',
selected: false,
},
{
selecteId: 16,
content: 'Watermelon',
selected: true,
},
{
selecteId: 17,
content: 'Grape',
selected: false,
},
];
export default class RadioModalItem extends Component {
constructor(props) {
super(props);
this.state = {
language: datas[3].selecteId,
item: datas[3].content,
initItem: '选项a',
initId: '0',
};
}
render() {
return (
<View style={{padding: 20, flex: 1, flexDirection: 'column'}}>
<Text
style={{backgroundColor: '#ffffff', color: '#414141', padding: 5}}>
The selected:<Text style={{color: '#ff0000'}}>{this.state.item}</Text>
</Text>
<Text
style={{backgroundColor: '#ffffff', color: '#414141', padding: 5}}>
Unique identification：
<Text style={{color: '#ff0000'}}>{this.state.language}</Text>
</Text>
<RadioModal
options={{id: 'selecteId', value: 'content', disabled: 'selected'}}
innerStyle={{width: (width - 80) / 2}}
txtColor={'#000000'}
noneColor={'#efefef'}
selectedValue={this.state.language}
onValueChange={(id, item) =>
this.setState({language: id, item: item})
}
seledImg={require('./imgs/selected.png')}
selImg={require('./imgs/select.png')}
selnoneImg={require('./imgs/selectnone.png')}
dataOption={datas}
style={{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
flex: 1,
backgroundColor: '#ffffff',
padding: 5,
marginTop: 10,
}}
/>
<Text
style={{backgroundColor: '#ffffff', color: '#414141', padding: 5}}>
The selected:
<Text style={{color: '#ff0000'}}>{this.state.initItem}</Text>
</Text>
<Text
style={{backgroundColor: '#ffffff', color: '#414141', padding: 5}}>
Unique identification：
<Text style={{color: '#ff0000'}}>{this.state.initId}</Text>
</Text>
<RadioModal
selectedValue={this.state.initId}
onValueChange={(id, item) =>
this.setState({initId: id, initItem: item})
}
style={{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
flex: 1,
backgroundColor: '#ffffff',
padding: 5,
marginTop: 10,
}}>
<Text value="0">选项a</Text>
<Text value="1" disabled="true">
选项b
</Text>
<Text value="2">选项c</Text>
<Text value="3">选项d</Text>
</RadioModal>
</View>
);
}
}
component/Map/ControlPanel.js → component/Map/RightSidebar/ControlPanel.js
浏览文件 @ 42b58d76
...@@ -2,46 +2,35 @@ ...@@ -2,46 +2,35 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import { import {
Dimensions, Dimensions,
Image,
ScrollView,
StyleSheet, StyleSheet,
Text, Text,
TouchableOpacity, TouchableOpacity,
View, View,
} from 'react-native'; } from 'react-native';
import ExampleOne from './ExampleOne'; import EmptyClassroomForm from './EmptyClassroomForm';
import Icon from 'react-native-vector-icons/AntDesign'; import Icon from 'react-native-vector-icons/AntDesign';
/**
* 此组件为侧边栏的主容器
*/
const {width, height} = Dimensions.get('window'); const {width, height} = Dimensions.get('window');
import ExampleTwo from './ExampleTwo';
import ExampleThree from './ExampleThree';
export default class ControlPanel extends Component { export default class ControlPanel extends Component {
render() { render() {
const state = this.state; const state = this.state;
let {closeDrawer} = this.props; let {closeDrawer} = this.props;
return ( return (
// <ScrollView style={styles.container}>
// <View style={{marginTop: 40}}>
// <Text style={styles.controlText}>Control Panel</Text>
// <TouchableOpacity style={styles.button} onPress={closeDrawer}>
// <Text>Close Drawer</Text>
// </TouchableOpacity>
// </View>
// </ScrollView>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', justifyContent: 'flex-end',backgroundColor: '#F6B972'}}>
<Text>{this.props.buildingnum}</Text> {/*<Text>{this.props.buildingnum}</Text>*/}
<TouchableOpacity onPress={closeDrawer}> <TouchableOpacity onPress={closeDrawer}>
<Icon name={'closecircleo'} size={20} /> <Icon name={'closecircleo'} size={35} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<EmptyClassroomForm />
<ExampleOne />
</View> </View>
); );
} }
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
......
component/Map/RightSidebar/EmptyClassroomForm.js 0 → 100644
浏览文件 @ 42b58d76
import React, {Component} from 'react';
import {Dimensions, Image, ScrollView, StyleSheet, View} from 'react-native';
import {Table, Row, Rows} from 'react-native-table-component';
const {width, height} = Dimensions.get('window');
/**
* 此组件显示右边侧边栏显示的内容包括教室表格和教室图片
*/
export default class EmptyClassroomForm extends Component {
constructor(props) {
super(props);
this.state = {
tableHead: ['教室', '空余位置', '容量', '教室类型'],
tableData: [
['1', '2', '3', '4'],
['a', 'b', 'c', 'd'],
['1', '2', '3', '456\n789'],
['a', 'b', 'c', 'd'],
],
};
}
render() {
const state = this.state;
return (
<View style={styles.container}>
<ScrollView showsVerticalScrollIndicator={false}>
<Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
<Row
data={state.tableHead}
style={styles.head}
textStyle={styles.text}
/>
<Rows data={state.tableData} textStyle={styles.text} />
</Table>
<Image
source={require('../../../images/Map/推荐图片1.jpg')}
style={{
width: (width - 15) / 2,
height: width / 3,
borderRadius: 20,
margin: 20,
}}
/>
<Image
source={require('../../../images/Map/侧边栏福大图片jpeg.jpeg')}
style={{
width: (width - 15) / 2,
height: width / 3,
borderRadius: 20,
margin: 20,
}}
/>
<Image
source={require('../../../images/Map/侧边栏福大图片1.jpeg')}
style={{
width: (width - 15) / 2,
height: width / 3,
borderRadius: 20,
margin: 20,
}}
/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {flex: 1, padding: 16, paddingTop: 15, backgroundColor: '#F6B972'},
head: {height: 40, backgroundColor: '#F6B972'},
text: {margin: 2, textAlign: 'center', fontWeight: '100', color: 'white'},
});
component/Map/SchoolMap.js → component/Map/SchoolMap/SchoolMap.js
浏览文件 @ 42b58d76
import {Component} from 'react'; import {Component} from 'react';
import {Text, View} from 'react-native'; import {View} from 'react-native';
import {MapView, Marker} from 'react-native-amap3d'; import {MapView, Marker} from 'react-native-amap3d';
import React from 'react'; import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
/**
* 此组件为福大旗山校区地图组件
*/
class SchoolMap extends Component { class SchoolMap extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -27,8 +29,7 @@ class SchoolMap extends Component { ...@@ -27,8 +29,7 @@ class SchoolMap extends Component {
}} }}
onPress={({nativeEvent}) => console.log(nativeEvent)}> onPress={({nativeEvent}) => console.log(nativeEvent)}>
<Marker <Marker
// icon={require('../../images/Map/黄旗子.png')} //F98404 F9B208 FC5404 F7FD04 四种地图图标颜色
//F98404 F9B208 FC5404 F7FD04
position={{ position={{
latitude: 26.05849318962613, //变大往上 latitude: 26.05849318962613, //变大往上
longitude: 119.19549000209701, //变小往左 longitude: 119.19549000209701, //变小往左
......
component/Map/Home.js → component/Map/SchoolMap/SchoolMapHome.js
浏览文件 @ 42b58d76
import React, {Component} from 'react'; import React, {Component} from 'react';
import { import {
StyleSheet, StyleSheet,
ScrollView,
TouchableOpacity, TouchableOpacity,
Text, Text,
Button,
Modal,
Image, Image,
View, View,
Dimensions,
} from 'react-native'; } from 'react-native';
import Drawer from 'react-native-drawer'; import Drawer from 'react-native-drawer';
// Drawer组件 // Drawer组件
import ControlPanel from './ControlPanel'; import {DatePicker} from 'react-native-common-date-picker';
import SchoolMap from './SchoolMap';
import ExampleOne from './ExampleOne';
import {CalendarList, DatePicker} from 'react-native-common-date-picker';
import DropDownModal from './DropDownModal';
import ModalDropdown from 'react-native-modal-dropdown'; import ModalDropdown from 'react-native-modal-dropdown';
import Icon from 'react-native-vector-icons/Ionicons'; import Icon from 'react-native-vector-icons/Ionicons';
import ControlPanel from '../RightSidebar/ControlPanel';
import SchoolMap from './SchoolMap';
class Home extends Component { /**
* 此为地图界面的容器
*/
const deviceWidthDp = Dimensions.get('window').width;
const deviceHeightDp = Dimensions.get('window').height;
class SchoolMapHome extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -107,12 +108,23 @@ class Home extends Component { ...@@ -107,12 +108,23 @@ class Home extends Component {
//能不能滑动 //能不能滑动
negotiatePan> negotiatePan>
{/*主内容区*/} {/*主内容区*/}
<Button <View
title={'点我偏好设置'} style={{
onPress={() => { alignItems: 'center',
navigation.navigate('Recmd1'); }}>
}} <TouchableOpacity
/> style={{
backgroundColor: '#b9edfa',
width: deviceWidthDp,
justifyContent: 'center',
}}
onPress={() => {
navigation.navigate('SettingView');
}}>
<Text style={{color: 'black', textAlign: 'center'}}>偏好设置</Text>
</TouchableOpacity>
</View>
<SchoolMap <SchoolMap
onPress={this.openDrawer} onPress={this.openDrawer}
onChangebuildingnum={this.onChangebuildingnum} onChangebuildingnum={this.onChangebuildingnum}
...@@ -125,7 +137,7 @@ class Home extends Component { ...@@ -125,7 +137,7 @@ class Home extends Component {
}}> }}>
{this.state.showDateBar ? ( {this.state.showDateBar ? (
<Image <Image
source={require('../../images/Map/日历.png')} source={require('../../../images/Map/日历.png')}
style={{width: 30, height: 30}} style={{width: 30, height: 30}}
/> />
) : null} ) : null}
...@@ -226,11 +238,6 @@ class Home extends Component { ...@@ -226,11 +238,6 @@ class Home extends Component {
/> />
)} )}
</View> </View>
{/*<ScrollView style={styles.container}>*/}
{/* /!*<Text>ces</Text>*!/*/}
{/* <SchoolMap />*/}
{/*</ScrollView>*/}
</Drawer> </Drawer>
); );
} }
...@@ -238,7 +245,6 @@ class Home extends Component { ...@@ -238,7 +245,6 @@ class Home extends Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
// backgroundColor: '#F2E2CE',
padding: 20, padding: 20,
flex: 1, flex: 1,
}, },
...@@ -275,4 +281,4 @@ const styles = StyleSheet.create({ ...@@ -275,4 +281,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default Home; export default SchoolMapHome;
component/Map/DropDownModal.js → component/Map/SingleComponent/DropDownModal.js
浏览文件 @ 42b58d76
...@@ -3,6 +3,10 @@ import {Image, StyleSheet, Text, View} from 'react-native'; ...@@ -3,6 +3,10 @@ import {Image, StyleSheet, Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'; import Icon from 'react-native-vector-icons/Ionicons';
import ModalDropdown from 'react-native-modal-dropdown'; import ModalDropdown from 'react-native-modal-dropdown';
import {Dimensions} from 'react-native'; import {Dimensions} from 'react-native';
/**
* 此组件为下拉选择框,用于偏好设置界面中的两个下拉选择,（开始节数和结束节数的下拉选择框和此组件没关系）
*/
const deviceWidthDp = Dimensions.get('window').width; const deviceWidthDp = Dimensions.get('window').width;
const deviceHeightDp = Dimensions.get('window').height; const deviceHeightDp = Dimensions.get('window').height;
function DropDownModal({ function DropDownModal({
...@@ -49,23 +53,22 @@ function DropDownModal({ ...@@ -49,23 +53,22 @@ function DropDownModal({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: '#F2E2CE', backgroundColor: '#F6B972',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderRadius: 5, borderRadius: 5,
alignSelf: 'center', alignSelf: 'center',
// flexWrap: 'wrap',
flex: 1, flex: 1,
marginRight: 20,
}, },
imgStyle: { imgStyle: {
height: 53, height: 53,
resizeMode: 'contain', resizeMode: 'contain',
flex: 1, flex: 1,
// backgroundColor: 'black'
}, },
titleStyle: { titleStyle: {
fontSize: 22, fontSize: 22,
color: '#5a5a5b', color: '#FFFFFF',
marginLeft: 40, marginLeft: 40,
height: 76, height: 76,
textAlignVertical: 'center', textAlignVertical: 'center',
......
component/Map/RadioView.js → component/Map/SingleComponent/RadioView.js
浏览文件 @ 42b58d76
import {TouchableOpacity, View} from 'react-native'; import {TouchableOpacity, View} from 'react-native';
import {PureComponent} from 'react'; import {PureComponent} from 'react';
import React from 'react'; import React from 'react';
/**
* 此独立组件用于偏好设置界面的单选按钮
*/
export default class RadioView extends PureComponent { export default class RadioView extends PureComponent {
static propTypes = {}; static propTypes = {};
......
component/Map/recmd2.js → component/Map/Top/RecommendView.js
浏览文件 @ 42b58d76
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Image, StyleSheet, Text, View, Dimensions, Button} from 'react-native'; import {Image, StyleSheet, Text, View, Dimensions, Button} from 'react-native';
/**
* 推荐界面
*/
const {width, height} = Dimensions.get('window'); const {width, height} = Dimensions.get('window');
class Recmd2 extends Component { class RecommendView extends Component {
render() { render() {
const {navigation} = this.props;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Button <Text style={{color: 'white', fontSize: 30, padding: 10}}>推荐</Text>
title={'点我返回设置偏好'} <Text
onPress={() => navigation.goBack()} style={{marginLeft: 10, color: 'white', padding: 10, fontSize: 25}}>
/>
<Text style={{color: 'white', fontSize: 20, padding: 10}}>推荐</Text>
<Text style={{marginLeft: 10, color: 'white', padding: 10}}>
西三203 西三203
</Text> </Text>
<Text style={{color: 'white', fontSize: 20, padding: 10}}> <Text style={{color: 'white', fontSize: 20, padding: 10}}>
...@@ -19,7 +18,7 @@ class Recmd2 extends Component { ...@@ -19,7 +18,7 @@ class Recmd2 extends Component {
</Text> </Text>
<View style={{flexDirection: 'row'}}> <View style={{flexDirection: 'row'}}>
<Image <Image
source={require('../../images/Map/推荐图片1.jpg')} source={require('../../../images/Map/推荐图片1.jpg')}
style={{ style={{
width: (width - 15) / 3, width: (width - 15) / 3,
height: width / 3, height: width / 3,
...@@ -27,7 +26,7 @@ class Recmd2 extends Component { ...@@ -27,7 +26,7 @@ class Recmd2 extends Component {
}} }}
/> />
<Image <Image
source={require('../../images/Map/推荐图片2.jpeg')} source={require('../../../images/Map/推荐图片2.jpeg')}
style={{ style={{
width: (width - 15) / 3, width: (width - 15) / 3,
height: width / 3, height: width / 3,
...@@ -35,7 +34,7 @@ class Recmd2 extends Component { ...@@ -35,7 +34,7 @@ class Recmd2 extends Component {
}} }}
/> />
<Image <Image
source={require('../../images/Map/推荐图片3.jpeg')} source={require('../../../images/Map/推荐图片3.jpeg')}
style={{ style={{
width: (width - 15) / 3, width: (width - 15) / 3,
height: width / 3, height: width / 3,
...@@ -45,7 +44,7 @@ class Recmd2 extends Component { ...@@ -45,7 +44,7 @@ class Recmd2 extends Component {
</View> </View>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Image <Image
source={require('../../images/Map/空数据.png')} source={require('../../../images/Map/空数据.png')}
style={{ style={{
width: null, width: null,
height: null, height: null,
...@@ -61,7 +60,7 @@ class Recmd2 extends Component { ...@@ -61,7 +60,7 @@ class Recmd2 extends Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: '#F2E2CE', backgroundColor: '#F6B972',
}, },
}); });
export default Recmd2; export default RecommendView;
component/Map/recmd1.js → component/Map/Top/SettingView.js
浏览文件 @ 42b58d76
import {Component} from 'react'; import {Component} from 'react';
import React from 'react'; import React from 'react';
import {Dimensions, Image, View, Text, StyleSheet, Button} from 'react-native'; import {
Dimensions,
Image,
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
const deviceWidthDp = Dimensions.get('window').width; const deviceWidthDp = Dimensions.get('window').width;
const deviceHeightDp = Dimensions.get('window').height; const deviceHeightDp = Dimensions.get('window').height;
import DropDownModal from './DropDownModal'; import DropDownModal from '../SingleComponent/DropDownModal';
import RadioView from './RadioView'; import RadioView from '../SingleComponent/RadioView';
import {StackNavigator} from 'react-navigation';
import Recmd2 from './recmd2'; /**
import navigation from '../Navigation'; * 偏好设置界面
import {createNativeStackNavigator} from '@react-navigation/native-stack'; */
import LoginView from './loginView'; class SettingView extends Component {
import Home from "./Home";
class Recmd1 extends Component {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
...@@ -22,11 +27,6 @@ class Recmd1 extends Component { ...@@ -22,11 +27,6 @@ class Recmd1 extends Component {
this.setState({ this.setState({
flag: id, flag: id,
}); });
if (id === 1) {
alert('第一种');
} else if (id === 2) {
alert('第二种');
}
}; };
render() { render() {
const {navigation} = this.props; const {navigation} = this.props;
...@@ -34,7 +34,7 @@ class Recmd1 extends Component { ...@@ -34,7 +34,7 @@ class Recmd1 extends Component {
<View style={styles.container}> <View style={styles.container}>
<View style={styles.box1}> <View style={styles.box1}>
<Image <Image
source={require('../../images/Map/行为偏好查询.png')} source={require('../../../images/Map/行为偏好查询.png')}
style={styles.box1image} style={styles.box1image}
/> />
<Text style={styles.box1text}>偏好设置</Text> <Text style={styles.box1text}>偏好设置</Text>
...@@ -55,19 +55,19 @@ class Recmd1 extends Component { ...@@ -55,19 +55,19 @@ class Recmd1 extends Component {
'东三楼', '东三楼',
]} ]}
title={'区域'} title={'区域'}
imgSource={require('../../images/Map/区域规则.png')} imgSource={require('../../../images/Map/区域规则.png')}
/> />
</View> </View>
<View style={styles.box3}> <View style={styles.box3}>
<DropDownModal <DropDownModal
data={['1楼', '2楼', '3楼', '4楼', '5楼']} data={['1楼', '2楼', '3楼', '4楼', '5楼']}
title={'楼层'} title={'楼层'}
imgSource={require('../../images/Map/建筑_楼层.png')} imgSource={require('../../../images/Map/建筑_楼层.png')}
/> />
</View> </View>
<View style={styles.box4}> <View style={styles.box4}>
<Image <Image
source={require('../../images/Map/我的人才.png')} source={require('../../../images/Map/我的人才.png')}
style={styles.box4image} style={styles.box4image}
/> />
...@@ -93,16 +93,26 @@ class Recmd1 extends Component { ...@@ -93,16 +93,26 @@ class Recmd1 extends Component {
<View style={{flex: 1.5}} /> <View style={{flex: 1.5}} />
</View> </View>
<View style={styles.box5}> <View style={styles.box5}>
<Button <TouchableOpacity
title={'开始匹配'} style={{
onPress={() => { backgroundColor: '#F6C354',
navigation.navigate('Recmd2'); width: deviceWidthDp / 4,
height: deviceHeightDp / 20,
marginBottom: 20,
justifyContent: 'center',
marginRight: 30,
}} }}
/> onPress={() => {
navigation.navigate('RecommendView');
}}>
<Text style={{color: '#FFFFFF', textAlign: 'center'}}>
开始匹配
</Text>
</TouchableOpacity>
</View> </View>
<View style={{flex: 10}}> <View style={{flex: 10}}>
<Image <Image
source={require('../../images/Map/加载中.png')} source={require('../../../images/Map/加载中.png')}
style={styles.box5image} style={styles.box5image}
/> />
</View> </View>
...@@ -114,7 +124,7 @@ const styles = StyleSheet.create({ ...@@ -114,7 +124,7 @@ const styles = StyleSheet.create({
container: { container: {
flexDirection: 'column', flexDirection: 'column',
flex: 1, flex: 1,
backgroundColor: '#F2E2CE', backgroundColor: '#F6B972',
}, },
box1: { box1: {
flexDirection: 'row', flexDirection: 'row',
...@@ -130,7 +140,7 @@ const styles = StyleSheet.create({ ...@@ -130,7 +140,7 @@ const styles = StyleSheet.create({
box1text: { box1text: {
textAlign: 'center', textAlign: 'center',
paddingTop: 5, paddingTop: 5,
color: '#000', color: '#FFFFFF',
}, },
box2: { box2: {
flex: 1, flex: 1,
...@@ -150,13 +160,14 @@ const styles = StyleSheet.create({ ...@@ -150,13 +160,14 @@ const styles = StyleSheet.create({
}, },
text: { text: {
fontSize: 22, fontSize: 22,
color: '#5a5a5b', color: '#FFFFFF',
textAlignVertical: 'center', textAlignVertical: 'center',
flex: 1, flex: 1,
textAlign: 'right', textAlign: 'right',
}, },
box5: { box5: {
flex: 1, flex: 1,
alignItems: 'flex-end',
}, },
box5image: { box5image: {
width: null, width: null,
...@@ -168,40 +179,4 @@ const styles = StyleSheet.create({ ...@@ -168,40 +179,4 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
}, },
}); });
const Stack = createNativeStackNavigator(); export default SettingView;
function Recmdstack() {
return (
<Stack.Navigator initialRouteName="LoginView">
<Stack.Screen
name="LoginView"
component={LoginView}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="Home"
component={Home}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="Recmd1"
component={Recmd1}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="Recmd2"
component={Recmd2}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
}
export default Recmdstack;
component/Map/index.js
浏览文件 @ 42b58d76
import React, {Component} from 'react'; import React, {Component} from 'react';
import {View, Text, StyleSheet, ScrollView, Button} from 'react-native'; import {View, StyleSheet} from 'react-native';
import {Dimensions} from 'react-native';
import Recmd1 from './recmd1';
import {MapType, MapView, Marker} from 'react-native-amap3d';
const deviceWidthDp = Dimensions.get('window').width;
const deviceHeightDp = Dimensions.get('window').height;
import {AMapSdk} from 'react-native-amap3d'; import {AMapSdk} from 'react-native-amap3d';
import {Platform} from 'react-native'; import {Platform} from 'react-native';
import SchoolMap from './SchoolMap'; import Mapstack from './Navigation/Mapstack';
import Home from './Home'; // AMapSdk.init 暂时没有用，定位功能应该会用到，ios的key是假的，我没有苹果电脑
import LoginView from './loginView';
AMapSdk.init( AMapSdk.init(
Platform.select({ Platform.select({
android: 'b4523624fa5c8d762d3787b86692d56e', android: 'b4523624fa5c8d762d3787b86692d56e',
...@@ -18,60 +11,10 @@ AMapSdk.init( ...@@ -18,60 +11,10 @@ AMapSdk.init(
}), }),
); );
class Map extends Component { class Map extends Component {
constructor(pros) {
super(pros);
this.state = {
srollviewheight: 2,
};
this.handleMomentumScrollEnd = this.handleMomentumScrollEnd.bind(this);
}
layout = e => {
this.setState({srollviewheight: e.layout.height});
};
handleMomentumScrollEnd(e) {
const x = e.nativeEvent.contentOffset.x;
const y = e.nativeEvent.contentOffset.y;
alert(y);
}
_onContentSizeChange() {
let initialYScroll = this.state.srollviewheight;
this.scrollView.scrollTo({x: 0, y: initialYScroll, animated: false});
}
render() { render() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
{/*<ScrollView*/} <Mapstack />
{/* style={{flex: 1}}*/}
{/* horizontal={false}*/}
{/* showsVerticalScrollIndicator={false}*/}
{/* pagingEnabled={true}*/}
{/* onLayout={({nativeEvent: e}) => this.layout(e)}*/}
{/* ref={scrollView => (this.scrollView = scrollView)}*/}
{/* onContentSizeChange={() => {*/}
{/* this._onContentSizeChange();*/}
{/* }}>*/}
{/* <View*/}
{/* style={{*/}
{/* width: deviceWidthDp,*/}
{/* height: this.state.srollviewheight,*/}
{/* }}>*/}
{/* <Recmd1 />*/}
{/* </View>*/}
{/* <View*/}
{/* style={{width: deviceWidthDp, height: this.state.srollviewheight}}>*/}
{/* <Text>地图界面</Text>*/}
{/* <Home />*/}
{/* </View>*/}
{/*</ScrollView>*/}
<Recmd1 />
{/*<View style={{flex: 1}}>*/}
{/* /!*<SchoolMap />*!/*/}
{/* /!*<Home />*!/*/}
{/* <LoginView />*/}
{/*</View>*/}
</View> </View>
); );
} }
......
component/Map/loginView.js 已删除 100644 → 0
浏览文件 @ 79a6a222
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Dimensions,
TextInput,
Button,
Image,
TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
const {width, height, scale} = Dimensions.get('window');
class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
username: null,
password: null,
verificationcode: null,
iconnum: true,
verify_url: 'https://jwcjwxt1.fzu.edu.cn/plus/verifycode.asp?n=',
};
}
changeusername = text => {
this.setState({username: text});
};
changepassword = text => {
this.setState({password: text});
};
changeverificationcode = text => {
this.setState({verificationcode: text});
};
changeiconnum = () => {
this.setState({iconnum: !this.state.iconnum});
};
render() {
const {navigation} = this.props;
return (
<View style={styles.container}>
{/*<Image source={require('./img/icon.png')} style={styles.iconStyle} />*/}
<Text>{this.state.username}</Text>
<Text>{this.state.password}</Text>
<Text>{this.state.verificationcode}</Text>
<View>
<TextInput
placeholder={'请输入用户名'}
style={styles.textInputStyle}
onChangeText={text => {
this.changeusername(text);
}}
/>
</View>
<View>
<TextInput
placeholder={'请输入密码'}
secureTextEntry={true}
selectionColor={'black'}
keyboardAppearance={'dark'}
style={styles.textInputStyle}
onChangeText={text => {
this.changepassword(text);
}}
/>
</View>
<View style={{flexDirection: 'row'}}>
<TextInput
placeholder={'请输入验证码'}
style={styles.textInputStyle2}
onChangeText={text => {
this.changeverificationcode(text);
}}
/>
<TouchableOpacity
onPress={() => {
this.setState({
verify_url:
'https://jwcjwxt1.fzu.edu.cn/plus/verifycode.asp?n=' +
Math.random(),
});
}}>
<Image
resizeMode="contain"
source={{uri: this.state.verify_url}}
style={{width: width * 0.2, height: 38, resizeMode: 'stretch'}}
/>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={this.changeiconnum}>
{this.state.iconnum ? (
<Icon name={'minuscircleo'} size={20} />
) : (
<Icon name={'checkcircleo'} size={20} />
)}
</TouchableOpacity>
<Text>阅读并同意用户协议和隐私政策</Text>
</View>
<Button
title={'登录'}
onPress={() => {
navigation.navigate('Home');
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
flexDirection: 'column',
backgroundColor: '#dddddd',
},
iconStyle: {
width: 80,
height: 80,
marginTop: 50,
marginBottom: 30,
borderRadius: 40,
borderWidth: 2,
borderColor: 'white',
},
textInputStyle: {
height: 38,
width: width * 0.9,
backgroundColor: 'white',
marginBottom: 1,
paddingLeft: 10,
textAlign: 'left',
},
textInputStyle2: {
height: 38,
width: width * 0.7,
backgroundColor: 'white',
marginBottom: 1,
paddingLeft: 10,
textAlign: 'left',
},
});
export default LoginView;
component/Map/size.js 已删除 100644 → 0
浏览文件 @ 79a6a222
// 创建文件 size.js
//暂时没有用，以后屏幕适配可能会用到吧
import {Dimensions} from 'react-native';
const deviceWidthDp = Dimensions.get('window').width;
const deviceHeightDp = Dimensions.get('window').height;
console.log('deviceWidthDp', deviceWidthDp, deviceHeightDp);
// 这里的uiWidthPx uiHeightPx 是你的设计稿的宽高尺寸
let uiWidthPx = 375;
let uiHeightPx = 750;
console.log('转化比率------', deviceWidthDp / uiWidthPx);
// 如果应用是横屏的用pTd
export const pTd = uiElePx => {
return (uiElePx * deviceHeightDp) / uiHeightPx;
};
// 如果应用是竖屏的用pTx
export const pTx = uiElePx => {
return (uiElePx * deviceWidthDp) / uiWidthPx;
};
index.js
浏览文件 @ 42b58d76
...@@ -4,9 +4,6 @@ ...@@ -4,9 +4,6 @@
import {AppRegistry, LogBox} from 'react-native'; import {AppRegistry, LogBox} from 'react-native';
import {name as appName} from './app.json'; import {name as appName} from './app.json';
import Navigation from './component/Navigation/index';
import MyHeader from './component/Header/index';
import Home from './page/Home/index';
import App from './page/App'; import App from './page/App';
// import App from './component/Map/App'; // import App from './component/Map/App';
//忽略react-native-tab-navigator中控件的一些不影响运行的警告 //忽略react-native-tab-navigator中控件的一些不影响运行的警告
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或