React Native基礎②～Text, TextInput, Button

Textについては、下記参照

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Good Morning</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize:20,
    color:"#f00"
  }
});

次はボタンです。ボタンとして機能させるには、onPressプロパティも記載が必要です。

import { StatusBar } from 'expo-status-bar';
import { TextInput } from 'react-native';
import { StyleSheet, Text, View, Button} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>名前：</Text>
      <TextInput style={styles.textInput}/>
      <Button title="PUSH"/>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'row',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInput: {
    borderWidth:2,
    width:200,
    marginRight: 20
  }
});

TextInputは、タグだけ書けばよいわけではなく、styleプロパティで

少なくとも、borderWidthを定義しなければ表示されません。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import {useState} from 'react';

export default function App() {
  const [name, setName] = useState("");
  const [nameText, setNameText] = useState("");
  return (
    <View style={styles.container}>
      <Text>name:</Text>
      <TextInput
         style={{borderWidth: 1}}
         value={name}
         onChangeText={text => setName(text)}
      />
      <Button
         title="PUSH"
         onPress={() => setNameText(name)}
      />
      <Text>{nameText}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});