ReactNative① Text、Buttonでフォームのようなものを作成する。

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',

  },

});

ボタンを押したときにテキストボックス内のテキストが下に表示される

テキストボックス内のテキストはnameというStateであり、下に表示されるテキストのために別のnameTextというStateも用意している。