Clever Geek Handbook

React-nativeに精通する方法としての電話計算機

こんにちは。





たまたまここ数年はウェブ開発に携わっていましたが、最近はモバイル機器の開発に挑戦する機会と希望があります。これにはいくつかの理由がありました。デスクトップがますます減少する役割を果たしているという理解から、この傾向は続いています。さらに、モバイルプラットフォームの機能の使用を想定したretプロジェクトのアイデアがいくつかありました。それがどうだったのか、そして何が起こったのか-カットの下で。





前書き

モバイル開発への移行が計画されていた時点で、私にとっての主な開発ツールはReactJSであったため、それから始めることにしました。さらに、構成の問題の重要な部分を解決するExpoアプリケーション構築プラットフォームを使用しました。アプリケーションの構築は、文字通りいくつかのコマンドで実行されました。





私にとって最初の比較的深刻な（少なくとも動作していて、QuickStartのパフォーマンスを示していない）アプリケーションは、各スマートフォンとほぼ同じ計算機でした。計算機には、ディスプレイとキーボードの2つのセクションがある1つの画面が含まれているはずでした。ディスプレイには情報が表示され、キーボードから入力できます。





結果のアプリケーションのスクリーンショットは、スポイラーの下にあります。確かに、それはデザインの傑作のようには見えませんが、組み込みの計算機よりもそれほど悪くはありません。これはここでは重要ではありません





ネタバレ
水平表示
水平表示
垂直表示
垂直表示





オンラインバージョンのエミュレーターを使用して起動しますが、Androidを搭載したいくつかの家庭用デバイス、およびブラウザーバージョンのExpoでは、ほぼ同じように見えます。





ソースコード分析

アプリケーションを最小限に「ハードコーディング」するために、キーボードにあるはずのすべてのボタンを別の2次元配列に移動しました。同時に、各ボタンのラベルは一意であるため、IDとしても使用されます。ハンドラー関数がバインドされるのはこの上です。 





let labels=[
    ["1","2","3"],
    ["4","5","6"],
    ["7","8","9"],
    ["0", ".","+/-"],
    ["+","-","*","/"],
    ["ln","C", "=",]
]

, - - , .





- , , - . - . - .





Spoiler 
let functionMapping = {
        "+":()=>{
            setOperation(()=>(a,b)=>{return a+b})
            setFirstOperand(display);
            setDisplay("")
        },
        "-":()=>{
            setOperation(()=>(a,b)=>{return a-b})
            setFirstOperand(display);
            setDisplay("")
        },
        "*":()=>{
            setOperation(()=>(a,b)=>{return a*b});
            setFirstOperand(display);
            setDisplay("")
        },
        "/":()=>{
            setOperation(()=>(a,b)=>{return a/b});
            setFirstOperand(display);
            setDisplay("");
        },
        "ln":()=>{
            setOperation(()=>(a,b)=>{return Math.log(a)});
            setFirstOperand(display);
        },
        "C":()=>{
            setFirstOperand("");
            setsecondOperand("");
            setOperation(null);
            setDisplay("");
        },
        "+/-":()=>{
            setDisplay((+display)*(-1)+"");
        },
        ".":()=>{
            if (display.indexOf(".")===-1)
                setDisplay(display+".")
        },
        "=":()=>{
            setsecondOperand(display);
            let rezult = operation(+firstOperand, +display);
            setDisplay(rezult);
        }
    }
    for (let i =0; i<10; i++) {
        functionMapping[i+""]=()=>{setDisplay(display+i)};
    }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    









setOperation(()=>(a,b)=>{return a * b})



, - , 





setOperation(()=>{return ab})

.





, - , , .





, - , .





, 4 , ( , ).





    const [operation, setOperation] = useState(null);
    const [firstOperand, setFirstOperand] = useState("");
    const [secondOperand, setsecondOperand] = useState("");
    const [display, setDisplay] = useState("");

, firstOperand secondOperand , display , , operation .





, - .





, , .





Spoiler 





<View style={styles.root}>
      <View style = {styles.display}>
          <Text style={{fontSize: 40}}>
              {display}
          </Text>
      </View>
        <View style={styles.keyboard}>
        {labels.map((value, index, array)=>{
          return <View style={styles.row}>
              {value.map((item)=>{
                  return <TouchableOpacity style={styles.cell} onPress={()=>{functionMapping[item]()}}>
                      <Text style={{fontSize: 35}}>{item}</Text>
                  </TouchableOpacity>
              })}
          </View>
        })}
      </View>
    </View>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    





const styles = StyleSheet.create({
  root: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize:40
  },
  display:{
      flex: 2,
      backgroundColor: "lightblue",
      width: "100%",
      justifyContent: "space-around",
      alignItems: "center"
  },
  keyboard:{
      flex: 9,
      width: "100%",
      backgroundColor:"lightgrey",
      justifyContent:"space-around",
      alignItems:"center"

  },
  row:{
      flex: 1,
      flexDirection:"row",
      justifyContent:"space-around",
      alignItems:"center",
      width:"100%",
  },
  cell:{
      flex:1,
      borderWidth:1,
      width:"100%",
      height:"100%",
      justifyContent:"space-around",
      alignItems:"center",
    }
});





-

Expo quickstart. , App.js, . - , .. Java ( , ). web-, Expo, - .





. , . - , - , . , Picker, , - . ( , ). , - , - , "", .





- , , .

- flex , - . "" CSS, , , .





- . , , - , , ...





, , React-native . , - , . , , , React over TypeScript - . , , react-native , .





P.S. C , - , - , .





PPSこの記事の対象読者は、Web開発の専門家ではなく、私のような下請け業者です。



ソースコード







More articles:


All Articles