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, 
     };