React native - 使用表格收集的值的算術運算

Question

我對React Native非常陌生，並試圖完成非常基本的應用程序之一的開發工作。只有兩個屏幕，一個。計算器和b。結果。 計算器屏幕有兩個輸入欄，它們只能接受一個數字值，當按結果按鈕時，理想的情況應該是將導航動畫推到結果屏幕並在結果屏幕上顯示結果。以下是我迄今爲止所做的代碼，導航工作正常，但我可以看到的唯一問題是結果沒有按照我的預期顯示。這似乎是我無法將數值轉移到其相關狀態。

***********計算器屏幕***********

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到 '結果' screen.Send它

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

在你的 '結果' 屏幕

現在你必須閱讀這些價值並將其設置爲您的狀態。

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