Indtastning af navn

React Native Chat App # 1

I React bruger man komponenter som Text, Card og mere.
Se https://facebook.github.io/react-native/docs/components-and-apis.html for flere komponenter og hvordan man bruger dem.


Text

Vi vil gerne have tekst i vores app,

Vi er nødt til at
1. Importere Text fra react native
2. Tilføje et <Text></Text> tag
3. Give tagget style egenskaben tildelt styles.title
4. Definere title i vores styles

import {
  StyleSheet,
  Text, // <- Add Text
  View,
} from 'react-native';
...
render() {
    return (
      <View>
        <Text style={styles.title}>Enter your name:</Text> 
      </View>
    );
  }
...
const offset = 24;
const styles = StyleSheet.create({
  title: {
    marginTop: offset,
    marginLeft: offset,
    fontSize: offset,
  }
})

Navigation

For at kunne skifte sider skal vi have sat noget navigation på plads

// Import the screens
import Main from './components/Main';
import Chat from './components/Chat';
// Import React Navigation
import { createStackNavigator } from 'react-navigation'
// Create the navigator
const navigator = createStackNavigator({
  Main: { screen: Main },
  Chat: { screen: Chat },
});
// Export it as the root component
export default navigator

Det er vigtigt at bruge en version 2.3.1 af react-navigation i package.json filen

{
  "dependencies": {
    ...
    "react-navigation": "2.3.1"
  }
}

Vi laver en knap på vores Main side ved at
1. Importere TouchableOpacity fra react-native
2. Lav en Knap ved at tilføje en Text der er omkranset i en TouchableOpacity derefter tildeler vi onPress til this.onPress
3. Tilføj styles til knappen

import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
...
render() {
    return (
      <View>
        <TouchableOpacity onPress={this.onPress}>
          <Text style={styles.buttonText}>Next</Text>
        </TouchableOpacity>
      </View>
    );
  }
...
const styles = StyleSheet.create({
  buttonText: {
    marginLeft: offset,
    fontSize: offset,
  },
})

Text input

Vi kan lave et tekst felt med <TextInput></TextInput> komponentet.

  1. Importer TextInput fra React Native
  2. Lav et komponent state og giv den en property der hedder name
  3. I render metoden mellem View taggene tilføjer vi et TextInput med en placeHolder som vi sætter value til det samme som state.name
import {
  StyleSheet,
  TextInput, // 1. <- Add this 
  View,
} from 'react-native';
...
class Main extends React.Component {
  state = { name: '' } // 2. <- Add the component state
  render() {
    return (
      <View>
        <TextInput
          style={styles.nameInput}
          placeHolder="John Cena"
          value={this.state.name}
        />
      </View>
    );
  }
}
...
const offset = 24;
const styles = StyleSheet.create({
  nameInput: { // 3. <- Add a style for the input
    height: offset * 2,
    margin: offset,
    paddingHorizontal: offset,
    borderColor: '#111111',
    borderWidth: 1,
  },
});

Herefter er vi nødt til at opdatere tilstanden (state) når brugeren taster noget.

// Inside the Main component...
onChangeText = name => this.setState({ name }); // 1.

// Inside the render() method...
<TextInput
  onChangeText={this.onChangeText} // <- Add this
  style={styles.nameInput}
  placeHolder="John Cena"
  value={this.state.name}
        />

Nu skulle du gerne kunne se dit Textinput