React native - フォームを使用して集められた値の算術演算

Question

React Nativeに非常に新しく、非常に基本的なアプリケーションの開発作業を終了しようとしています。 2つの画面しかありません。電卓とb。結果。 電卓画面には2つの入力フィールドがあり、数値を入力できるだけで、結果ボタンを押すとアニメーションを結果画面にプッシュし、結果画面に結果を表示するのが理想的です。以下は私がこれまで行ってきたコードですが、ナビゲーションはうまくいきますが、私が見ることができる唯一の問題は結果が私の期待通りに現れないことです。私は数値をその関連する状態に移すことに失敗しているようです。

***********

import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
    StyleSheet, 
    TextInput, 
    Button, 
    ScrollView, 
    KeyboardAvoidingView 
} from 'react-native'; 
import Result from './Result'; 

export default class Calculator extends Component { 
    static navigationOptions = { 
    title: 'Calculator', 
    }; 

constructor(props) { 
    super(props); 
    this.state = { 
    cashOnHand: 0, 
    cashInBank: 0, 

    }; 
    }; 

    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <ScrollView> 
     <View style={styles.form}> 
     <Text> 
     Please enter your values in respective fields. 
     </Text> 
     <KeyboardAvoidingView behavior = 'position'> 
     <TextInput placeholder = "Cash on hand" 
     placeholderTextColor = "#635B53" 
     keyboardType = 'numeric' 
     onChangeText={cashOnHand => this.setState({cashOnHand})} 
     style={styles.textFields} 
     /> 
     </KeyboardAvoidingView> 
     <TextInput placeholder = "Cash in bank accounts" 
     placeholderTextColor = "#635B53" 
     keyboardType = 'numeric' 
     onChange={cashInBank => this.setState({cashInBank})} 
     style={styles.textFields} 
     /> 
     </KeyboardAvoidingView> 
     <Button onPress={() => navigate('Result',{cashOnHand:this.state.cashOnHand,cashInBank:this.state.cashInBank})} 
     title = 'Result' 
     color = '#FFF' 
     /> 
     </View> 
     </ScrollView> 

    ); 
    } 
} 

const styles = StyleSheet.create({ 
    form: { 
    flex: 1, 
    padding: 37, 
    alignItems: 'center', 
    flexDirection: 'column', 
    backgroundColor: '#0C66F3' 
    }, 
    textFields: { 
    height: 40, 
    width: 300, 
    marginTop: 10, 
    marginBottom: 10, 
    backgroundColor: '#A2C4E8', 
    paddingHorizontal: 10, 
    fontSize: 15, 
    fontFamily: 'HelveticaNeue-Light', 
    alignItems: 'center', 
    }, 
}) 

***********電卓画面スクリーンを結果*********** ** *********

import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
    StyleSheet 
} from 'react-native'; 
import Calculator from './Calculator'; 

export default class Result extends Component { 
    static navigationOptions = { 
    title: 'Result', 
    }; 

    constructor(props) { 
    super(props); 
    this.state = { 
     cashOnHand: this.props.navigation.state.params.cashOnHand, 
    cashInBank: this.props.navigation.state.params.cashInBank, 

     }; 
    }; 


    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View > 
     <Text> 
      Result Payable = { 

       this.state.cashOnHand - this.state.cashInBank 

      } 
     </Text> 
     </View> 
    ); 
    } 
} 

Answer 1

最初のもの、あなたが '結果' に変数cashOnHandとcashInBankを送信していないがあなたの '結果' の画面で今

onPress={() => navigate('Result',{cashOnHand:this.state.cashOnHand,cashInBank:this.state.cashInBank})} 

それをscreen.Sendあなたはこれらの値を読む必要がありますあなたの状態に設定してください。

this.state = { 
     cashOnHand: this.props.navigation.state.params.cashOnHand, 
     cashInBank: this.props.navigation.state.params.cashInBank, 
     };