|
|
@@ -1,3 +1,4 @@
|
|
|
+<<<<<<< HEAD
|
|
|
/**
|
|
|
* Sample React Native App
|
|
|
* https://github.com/facebook/react-native
|
|
|
@@ -6,111 +7,55 @@
|
|
|
* @flow
|
|
|
*/
|
|
|
|
|
|
-import React, {Fragment} from 'react';
|
|
|
+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';
|
|
|
|
|
|
-const App = () => {
|
|
|
+import React, {Component} from 'react';
|
|
|
+import {Platform, StyleSheet, Text, View} from 'react-native';
|
|
|
|
|
|
- return (
|
|
|
- <Fragment>
|
|
|
- <StatusBar barStyle="dark-content" />
|
|
|
- <SafeAreaView>
|
|
|
+const instructions = Platform.select({
|
|
|
+ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
|
|
|
+ android:
|
|
|
+ 'Double tap R on your keyboard to reload,\n' +
|
|
|
+ 'Shake or press menu button for dev menu',
|
|
|
+});
|
|
|
|
|
|
- <ScrollView
|
|
|
- contentInsetAdjustmentBehavior="automatic"
|
|
|
- style={styles.scrollView}>
|
|
|
- <Header />
|
|
|
- {global.HermesInternal == null ? null : (
|
|
|
- <View style={styles.engine}>
|
|
|
- <Text style={styles.footer}>Engine: Hermes</Text>
|
|
|
- </View>
|
|
|
- )}
|
|
|
- <View style={styles.body}>
|
|
|
- <View style={styles.sectionContainer}>
|
|
|
- <Text style={styles.sectionTitle}>Step One</Text>
|
|
|
- <Text style={styles.sectionDescription}>
|
|
|
- Edit <Text style={styles.highlight}>App.js</Text> to change this
|
|
|
- screen and then come back to see your edits.
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <View style={styles.sectionContainer}>
|
|
|
- <Text style={styles.sectionTitle}>See Your Changes</Text>
|
|
|
- <Text style={styles.sectionDescription}>
|
|
|
- <ReloadInstructions />
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <View style={styles.sectionContainer}>
|
|
|
- <Text style={styles.sectionTitle}>Debug</Text>
|
|
|
- <Text style={styles.sectionDescription}>
|
|
|
- <DebugInstructions />
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
- <View style={styles.sectionContainer}>
|
|
|
- <Text style={styles.sectionTitle}>Learn More</Text>
|
|
|
- <Text style={styles.sectionDescription}>
|
|
|
- Read the docs to discover what to do next:
|
|
|
- </Text>
|
|
|
+type Props = {};
|
|
|
+
|
|
|
+export default class App extends Component<Props> {
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <View style={styles.container}>
|
|
|
+ <Text style={styles.welcome}>Welcome to React Native!</Text>
|
|
|
+ <Text style={styles.instructions}>To get started, edit App.js</Text>
|
|
|
+ <Text style={styles.instructions}>{instructions}</Text>
|
|
|
</View>
|
|
|
- <LearnMoreLinks />
|
|
|
- </View>
|
|
|
- </ScrollView>
|
|
|
- </SafeAreaView>
|
|
|
- </Fragment>
|
|
|
- );
|
|
|
-};
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
- scrollView: {
|
|
|
- backgroundColor: Colors.lighter,
|
|
|
- },
|
|
|
- engine: {
|
|
|
- position: 'absolute',
|
|
|
- right: 0,
|
|
|
- },
|
|
|
- body: {
|
|
|
- backgroundColor: Colors.white,
|
|
|
- },
|
|
|
- sectionContainer: {
|
|
|
- marginTop: 32,
|
|
|
- paddingHorizontal: 24,
|
|
|
- },
|
|
|
- sectionTitle: {
|
|
|
- fontSize: 24,
|
|
|
- fontWeight: '600',
|
|
|
- color: Colors.black,
|
|
|
- },
|
|
|
- sectionDescription: {
|
|
|
- marginTop: 8,
|
|
|
- fontSize: 18,
|
|
|
- fontWeight: '400',
|
|
|
- color: Colors.dark,
|
|
|
- },
|
|
|
- highlight: {
|
|
|
- fontWeight: '700',
|
|
|
- },
|
|
|
- footer: {
|
|
|
- color: Colors.dark,
|
|
|
- fontSize: 12,
|
|
|
- fontWeight: '600',
|
|
|
- padding: 4,
|
|
|
- paddingRight: 12,
|
|
|
- textAlign: 'right',
|
|
|
- },
|
|
|
-});
|
|
|
-
|
|
|
-export default App;
|
|
|
+ container: {
|
|
|
+ flex: 1,
|
|
|
+ justifyContent: 'center',
|
|
|
+ alignItems: 'center',
|
|
|
+ backgroundColor: '#F5FCFF',
|
|
|
+ },
|
|
|
+ welcome: {
|
|
|
+ fontSize: 20,
|
|
|
+ textAlign: 'center',
|
|
|
+ margin: 10,
|
|
|
+ },
|
|
|
+ instructions: {
|
|
|
+ textAlign: 'center',
|
|
|
+ color: '#333333',
|
|
|
+ marginBottom: 5,
|
|
|
+ },
|
|
|
+});
|