Added more screen

This commit is contained in:
M10T 2020-08-09 20:56:12 -04:00
parent 4e62459760
commit 199e2591ba
8 changed files with 227 additions and 3 deletions

29
app/Announcements.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class Announcements extends React.Component {
render() {
return (
<View>
</View>
)
}
}
export default Announcements;

View File

@ -6,6 +6,8 @@ import {
View, View,
Text, Text,
StatusBar, StatusBar,
FlatList,
TouchableOpacity
} from 'react-native'; } from 'react-native';
import { import {
@ -16,14 +18,93 @@ import {
ReloadInstructions, ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; } from 'react-native/Libraries/NewAppScreen';
class More extends React.Component { import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import styles from './styles/morestyles'
import Announcements from './Announcements'
import Resources from './Resources'
import StudentWeek from './StudentWeek'
import SSLOps from './SSLOps'
const Stack = createStackNavigator()
class MoreSwitch extends React.Component {
constructor(props) {
super(props)
this.props = props
}
render() { render() {
return ( return (
<View> <View style={{flex:1}}>
<FlatList
data={[
{name:"Announcements",key:"announce"},
{name:"Resources",key:"resources"},
{name:"Student of the Week",key:"studentweek"},
{name:"SSL Opportunities",key:"sslops"}
]}
renderItem={({item})=>
<TouchableOpacity style={styles.moreitem} onPress={()=>this.props.navigation.navigate(item.key)}>
<Text style={styles.moretext}>{item.name}</Text>
</TouchableOpacity>
}
/>
</View> </View>
) )
} }
} }
class More extends React.Component {
render() {
return (
<NavigationContainer independent={true}>
<Stack.Navigator>
<Stack.Screen
name="Chooser"
component={MoreSwitch}
options={{
title:'More',
headerTitleStyle:styles.headerTitle
}}
/>
<Stack.Screen
name="announce"
component={Announcements}
options={{
title:'Announcements',
headerTitleStyle:styles.headerTitle
}}
/>
<Stack.Screen
name="resources"
component={Resources}
options={{
title:'Resources',
headerTitleStyle:styles.headerTitle
}}
/>
<Stack.Screen
name="studentweek"
component={StudentWeek}
options={{
title:'Student of the Week',
headerTitleStyle:styles.headerTitle
}}
/>
<Stack.Screen
name="sslops"
component={SSLOps}
options={{
title:'SSL Opportunities',
headerTitleStyle:styles.headerTitle
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
export default More; export default More;

29
app/Resources.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class Resources extends React.Component {
render() {
return (
<View>
</View>
)
}
}
export default Resources;

29
app/SSLOps.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class SSLOps extends React.Component {
render() {
return (
<View>
</View>
)
}
}
export default SSLOps;

29
app/StudentWeek.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
class StudentWeek extends React.Component {
render() {
return (
<View>
</View>
)
}
}
export default StudentWeek;

21
app/styles/morestyles.js Normal file
View File

@ -0,0 +1,21 @@
import {StyleSheet, Dimensions} from 'react-native';
const styles=StyleSheet.create({
moreitem: {
backgroundColor:'red',
borderColor:'white',
borderWidth:0.5,
height: Dimensions.get('window').height*0.075,
justifyContent:'center'
},
moretext: {
color:'#eee',
fontSize:20,
},
headerTitle: {
fontWeight:'bold',
fontSize:24
}
});
export default styles;

5
package-lock.json generated
View File

@ -2308,6 +2308,11 @@
"integrity": "sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==", "integrity": "sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==",
"dev": true "dev": true
}, },
"@react-native-community/masked-view": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz",
"integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ=="
},
"@react-navigation/bottom-tabs": { "@react-navigation/bottom-tabs": {
"version": "5.8.0", "version": "5.8.0",
"resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.8.0.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.8.0.tgz",

View File

@ -10,6 +10,7 @@
"lint": "eslint ." "lint": "eslint ."
}, },
"dependencies": { "dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.8.0", "@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/native": "^5.7.3", "@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0", "@react-navigation/stack": "^5.9.0",