Go to Qiita Advent Calendar 2024 Top
LoginSignup

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

@chain_saw_man(Kaoru K)

電卓アプリのコード置き場

Last updated at Posted at 2019-12-06

#スタイル用コード

style.js

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
    container: {
      backgroundColor: '#FFF',
    },
    countArea: {
      marginTop: 140,
      justifyContent: "center",
      alignItems: "center", 
      marginBottom:10
    },
    buttonArea: {
      marginTop: 5,
      justifyContent: 'center',
      alignItems: 'center'  
    },
    value: {
      fontSize: 30
    },
    topbutton: {
      marginTop: 50
    },
    button: {
      marginTop: 5,
      justifyContent: 'center',
      alignItems: 'center',
      width: 50,
      height: 40,
      borderRadius: 5,
      borderWidth: 1,
      borderColor: '#fff'
    },
    buttonText: {
      fontSize: 25,
      color: '#fff'
    },
    buttonUp: {
      backgroundColor: '#A53434',
      fontWeight: "bold"
    },
    buttonUpText: {
      backgroundColor: 'red'
    },
    buttonMinus: {
      backgroundColor: '#343EA5'
    },
    buttonTimes: {
      backgroundColor: 'purple'
    },
    buttonDivide: {
      backgroundColor: "green"
    },
    buttonReset: {
      borderColor: '#AFADAD',
      marginBottom: 200
    },
    buttonResetText: {
      color: '#000',
      fontSize:11
    },
    buttonNum: {
      backgroundColor: 'grey',
      fontWeight: "bold",
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
      width: 60,
      height: 40,
      borderRadius: 5,
      borderWidth: 1,
      borderColor: '#fff'
    },
    buttonEqual: {
      backgroundColor: "black"
    }
  });

  export default (styles);

#レイアウト完了後のコード

App.js

import React, {Component} from 'react';
import styles from "./style"
import {TouchableOpacity, Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View>
        <View style={styles.countArea}>
          <Text style={styles.value}>0  ?  0  =  0</Text>
        </View>

        <View style={styles.buttonArea}>
          <View style={{flexDirection: 'row'}}>
            {array1.map(i => (
                <TouchableOpacity style={styles.topbutton,styles.buttonNum} key={i}>
                  <Text style={styles.buttonText}> {i} </Text>
                </TouchableOpacity>
            ))}
          </View> 

          <View style={{ flexDirection: 'row'}}>
            {array2.map(i => (
                <TouchableOpacity style={styles.topbutton, styles.buttonNum} key={i} >
                  <Text style={styles.buttonText}> {i} </Text>
                </TouchableOpacity>
            ))}
          </View>

          <View style={{ flexDirection: 'row'}}>
            <TouchableOpacity style={[styles.button, styles.buttonUpText]}>
              <Text style={styles.buttonText}>+</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonMinus]} >
              <Text style={styles.buttonText}>-</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonTimes]} >
              <Text style={styles.buttonText}>x</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonDivide]} >
              <Text style={styles.buttonText}>÷</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonEqual]} >
              <Text style={styles.buttonText}>=</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonReset]} >
              <Text style={[styles.buttonResetText]}>リセット</Text>
            </TouchableOpacity>
          </View>
         </View>
      </View>
    );
  };
};


const array1 = [];
for (let i = 0; i< 5; i++) {
  array1[i] = i
}

const array2 = [];
for (let i = 5; i< 10; i++) {
  array2[i] = i
}

#左右の数字と四則演算の入力ができるコード

App.js

import React, {Component} from 'react';
import styles from "./style"
import {TouchableOpacity, Text, View} from 'react-native';

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      leftNum: 0,
      mark: "?",
      rightNum: 0,
    }
  }
  onNum(input){
    if (this.state.mark == "?"){
      let num = Number(String(this.state.leftNum) + String(input["i"]))
      this.setState({ leftNum: num })
    } else {
      let num = Number(String(this.state.rightNum) + String(input["i"]))
      this.setState({ rightNum: num })
    } 
  }
  onMark(input){
    if (input == "plus"){
      this.setState({  mark: "+"  })
    } else if (input == "minus") {
      this.setState({ mark: "-" })
    } else if (input == "times") {
      this.setState( { mark: "x"} )
    } else if (input == "divide") {
      this.setState({ mark: "➗"})
    } 
  }

  render() {
    return (
      <View>
        <View style={styles.countArea}>
          <Text style={styles.value}>{this.state.leftNum}  {this.state.mark}  {this.state.rightNum}  =  0</Text>
        </View>

        <View style={styles.buttonArea}>
          <View style={{flexDirection: 'row'}}>
            {array1.map(i => (
                <TouchableOpacity style={styles.topbutton,styles.buttonNum} key={i} onPress={() => this.onNum({i})}>
                  <Text style={styles.buttonText}> {i} </Text>
                </TouchableOpacity>
            ))}
          </View> 

          <View style={{ flexDirection: 'row'}}>
            {array2.map(i => (
                <TouchableOpacity style={styles.topbutton, styles.buttonNum} key={i} onPress={() => this.onNum({i})} >
                  <Text style={styles.buttonText}> {i} </Text>
                </TouchableOpacity>
            ))}
          </View>

          <View style={{ flexDirection: 'row'}}>
          <TouchableOpacity style={[styles.button, styles.buttonUpText]} onPress={() => this.onMark("plus")}>
            <Text style={styles.buttonText}> + </Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonMinus]} onPress={() => this.onMark("minus")}>
            <Text style={styles.buttonText}> - </Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonTimes]} onPress={() => this.onMark("times")}>
            <Text style={styles.buttonText}> x </Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonDivide]} onPress={() => this.onMark("divide")}>
            <Text style={styles.buttonText}> ÷ </Text>
          </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonEqual]} >
              <Text style={styles.buttonText}> = </Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonReset]} >
              <Text style={[styles.buttonResetText]}>リセット</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  };
};


const array1 = [];
for (let i = 0; i< 5; i++) {
  array1[i] = i
}

const array2 = [];
for (let i = 5; i< 10; i++) {
  array2[i] = i
}

#完成版コード

App.js

import React, {Component} from 'react';
import styles from "./style"
import {TouchableOpacity, Text, View} from 'react-native';

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      leftNum: 0,
      mark: "?",
      rightNum: 0,
      result: 0
    }
  }
  onNum(input){
    if (this.state.mark == "?"){
      let num = Number(String(this.state.leftNum) + String(input["i"]))
      this.setState({ leftNum: num })
    } else {
      let num = Number(String(this.state.rightNum) + String(input["i"]))
      this.setState({ rightNum: num })
    } 
  }
  onMark(input){
    if (input == "plus"){
      this.setState({  mark: "+"  })
    } else if (input == "minus") {
      this.setState({ mark: "-" })
    } else if (input == "times") {
      this.setState( { mark: "x"} )
    } else if (input == "divide") {
      this.setState({ mark: "➗"})
    } 
  }

  onEqual(){
    if (this.state.mark == "+") {
      this.setState( {result: this.state.leftNum+ this.state.rightNum })
    } else if (this.state.mark == "-") {
      this.setState( { result: this.state.leftNum- this.state.rightNum})
    } else if (this.state.mark == "x") {
      this.setState( { result: this.state.leftNum* this.state.rightNum})
    } else if (this.state.mark == "➗") {
      this.setState( { result: this.state.leftNum/ this.state.rightNum})
    }
  }

  onReset(){
    this.setState({ leftNum: 0, mark: "?", rightNum:0, result:0 })
  }

  render() {
    return (
      <View>
        <View style={styles.countArea}>
          <Text style={styles.value}>{this.state.leftNum}  {this.state.mark}  {this.state.rightNum}  =  {this.state.result}</Text>
        </View>

        <View style={styles.buttonArea}>
          <View style={{flexDirection: 'row'}}>
            {array1.map(i => (
                <TouchableOpacity style={styles.topbutton,styles.buttonNum} key={i} onPress={() => this.onNum({i})}>
                  <Text style={styles.buttonText}> {i} </Text>
                </TouchableOpacity>
            ))}
          </View> 

          <View style={{ flexDirection: 'row'}}>
            {array2.map(i => (
                <TouchableOpacity style={styles.topbutton, styles.buttonNum} key={i} onPress={() => this.onNum({i})} >
                  <Text style={styles.buttonText}> {i} </Text>
                </TouchableOpacity>
            ))}
          </View>

          <View style={{ flexDirection: 'row'}}>
          <TouchableOpacity style={[styles.button, styles.buttonUpText]} onPress={() => this.onMark("plus")}>
            <Text style={styles.buttonText}> + </Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonMinus]} onPress={() => this.onMark("minus")}>
            <Text style={styles.buttonText}> - </Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonTimes]} onPress={() => this.onMark("times")}>
            <Text style={styles.buttonText}> x </Text>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.button, styles.buttonDivide]} onPress={() => this.onMark("divide")}>
            <Text style={styles.buttonText}> ÷ </Text>
          </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonEqual]} onPress={() => this.onEqual()} >
              <Text style={styles.buttonText}> = </Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.button, styles.buttonReset]} onPress={() => this.onReset()}>
              <Text style={[styles.buttonResetText]}>リセット</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  };
};


const array1 = [];
for (let i = 0; i< 5; i++) {
  array1[i] = i
}

const array2 = [];
for (let i = 5; i< 10; i++) {
  array2[i] = i
}
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?