Browse Source

0.0.11 Button basics.

Frederic G. MARAND 6 years ago
parent
commit
159bc04757
3 changed files with 84 additions and 1 deletions
  1. 1 1
      App.js
  2. 29 0
      App09TextInput.js
  3. 54 0
      App10ButtonBasics.js

+ 1 - 1
App.js

@@ -1,6 +1,6 @@
 // import { AppRegistry } from 'react-native';
 
-import App from './App08FlexLayout';
+import App from './App10ButtonBasics';
 
 export default App;
 

+ 29 - 0
App09TextInput.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+class PizzaTranslator extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { text: '' };
+  }
+  render() {
+    return (
+      <View style={{ padding: 10, paddingTop: 20 }}>
+        <TextInput
+          onChangeText={text => this.setState({ text }) }
+          placeholder="Type here to translate!"
+          style={{ height: 40 }}
+        />
+        <Text style={{ padding: 10, fontSize: 42 }}>
+          {this.state.text.split(' ').map(word => word && '🍕').join(' ')}
+        </Text>
+      </View>
+    );
+  }
+}
+
+export default PizzaTranslator;

+ 54 - 0
App10ButtonBasics.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  Alert,
+  Button,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  buttonContainer: {
+    margin: 20,
+  },
+  alternativeLayoutButtonContainer: {
+    margin: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
+class ButtonBasics extends React.Component {
+  onPressButton() {
+    Alert.alert('You pressed THE button');
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.buttonContainer}>
+          <Button onPress={this.onPressButton}
+            title="Press me"
+          />
+          <Button onPress={this.onPressButton}
+            title="Press me"
+            color="#841584"
+          />
+        </View>
+        <View style={styles.alternativeLayoutButtonContainer}>
+          <Button onPress={this.onPressButton}
+            title="This looks great!"
+          />
+          <Button onPress={this.onPressButton}
+            title="OK"
+            color="#841584"
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+export default ButtonBasics;