React Native で、トグルボタンを作成する

 

作ってみました。

App.js

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

export default function App() {
  const [bool, setBool] = useState(true);

  const pressHandler = () => {
    bool ? setBool(false) : setBool(true);
  };
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Button title={bool ? "START" : "PAUSE"} onPress={pressHandler} />
      <StatusBar style="auto" />
    </View>
  );
}

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

 

JavaScriptで、文字列を操作する~配列のコードを文字列として表示したい~

配列のコード、すなわち、["banana", "apple","orange"]というのを文字列で渡したいときがありました。

 

 const array = ["banana","apple","orange"];
  const arrayText = array.join('","');
  const arrayTextConnect = '["' + arrayText + '"]';
 
console.log(arrayTextConnect);

苦手なAPI対応について再入門する②

初期画面は『取得中...』というのが出ないように、ボタンを押せば取得中...がでるようなコードに変更しました。

 

App.js

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

export default function App() {
  const [joke, setJoke] = useState({ todos: null });

  const [isDone, setIsDone] = useState(false);

  const pressHandler = () => {
    axios
      .then((res) => {
        setJoke({ ...joke, todos: res.data });
      })
      .catch((err) => {
        console.log(err);
      });
    setIsDone(true);
  };

  if (!joke.todos) {
    if (!isDone) {
      return (
        <View style={styles.containerFirst}>
          <Text>下のGETボタンを押してください</Text>
          <Button title="GET" onPress={pressHandler} />
        </View>
      );
    } else {
      return (
        <View style={styles.containerFirst}>
          <Text>取得中...</Text>
          <Button title="GET" onPress={pressHandler} />
        </View>
      );
    }
  } else {
    return (
      <View style={styles.container}>
        <Text style={{ fontSize: 20 }}>setup:</Text>
        <Text>{joke.todos.setup}</Text>
        <Text style={{ fontSize: 20, marginTop: 50 }}>punchline:</Text>
        <Text>{joke.todos.punchline}</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
}

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

 

API処理は非同期処理になるので、

『コールバック関数』『Promise』『async/await』のいずれかの構文を利用すべきでしょう。

下記記事修正して掲載。

yuuzaki2022.hatenablog.com

ChatGPTを使用したアプリを作成したい④

Androidで Microsoft Copilotのアプリが2023年12月に出たようです。

「Microsoft Copilot」のAndroidアプリがGoogle Playストアに登場 - ITmedia NEWS

 

copilotのAPlは提供されてないようです。

なので、Open AIでchatgptのAPIを使用することにします。