React Nativeで、カウンターを作成 - JavaScriptからReactまで

カウンターを作成してみます。

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

function SubCounter(props){
  const increaseCount = () =>{
    props.inc();
  }
  return(
    <View>
       <Text>{props.count}</Text>
       <Button title='+'
              onPress={increaseCount}
       />
    </View>
  )
}


export default function App() {
  const [count, setCount] = useState(0);
  const increaseCount = () =>{
    setCount((count) => count + 1);
  }
  return (
    <View style={styles.container}>
      <Text>Counter</Text>
      <SubCounter inc={increaseCount}
                  count={count}
      />
      <StatusBar style="auto" />
    </View>
  );
}

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

これが作成できないと、FirebaseのAuthenticationのサンプルコードが理解できない。

登録画面とログイン画面は似ているので共通化していることが多いためです。