React native 通过反应导航传递多个道具_React Native_Parameters_React Navigation

React native 通过反应导航传递多个道具

react-native parameters

React native 通过反应导航传递多个道具,react-native,parameters,react-navigation,React Native,Parameters,React Navigation,我对react native和尝试制作GSTCalculator应用程序还不熟悉。我在计算器屏幕上从用户处获取值，并在结果屏幕上显示计算值。我的问题是，计算值不会立即显示在结果屏幕上。我甚至使用了async和Wait。但它只显示第一个计算值 calculate = async() => { await this.calculateSum(); this.props.navigation.navigate('Result', {prodCost: this.state.pro

我对react native和尝试制作GSTCalculator应用程序还不熟悉。我在计算器屏幕上从用户处获取值，并在结果屏幕上显示计算值。我的问题是，计算值不会立即显示在结果屏幕上。我甚至使用了async和Wait。但它只显示第一个计算值

calculate = async() => {
    await this.calculateSum();
    this.props.navigation.navigate('Result', {prodCost: this.state.prodCost,
        mfdProfitMargin: this.state.mfdProfitMargin, mCost: this.state.mCost, whProfit: this.state.whProfit,
        rtProfit: this.state.rtProfit, cgst: this.state.cgst, sgst: this.state.sgst, igst: this.state.igst,
        igstV: this.state.igstV, m2wV: this.state.m2wV, w2rT: this.state.w2rT, whProfitV: this.state.whProfitV,
        cgstV: this.state.cgstV, sgstV: this.state.sgstV, w2rV :this.state.w2rV, rtProfitV: this.state.rtProfitV })
}

calculateSum = () => {
    this.setState({mCost: Number(this.state.prodCost) + Number(this.state.mfdProfitMargin)}); 
    this.setState({igstV: (Number(this.state.mCost)*Number(this.state.igst))/100});
    this.setState({m2wV: Number(this.state.mCost) + Number(this.state.igstV)});
    this.setState({whProfitV: (this.state.m2wV)*Number(this.state.whProfit)/100});
    this.setState({w2rT: Number(this.state.m2wV) + Number(this.state.whProfitV)});
    this.setState({cgstV: (this.state.w2rT)*Number(this.state.cgst)/100});
    this.setState({sgstV: (this.state.w2rT)*Number(this.state.sgst)/100});
    this.setState({w2rV: Number(this.state.w2rT) + Number(this.state.cgstV) + Number(this.state.sgstV)});
    this.setState({rtProfitV: (this.state.w2rV)*Number(this.state.rtProfit)/100});
}

export default class Result extends Component {

constructor(props) {
    super(props);
    this.state = { pCost: this.props.navigation.state.params.prodCost, pMargin: this.props.navigation.state.params.mfdProfitMargin,
                   mCost:this.props.navigation.state.params.mCost, igstP: this.props.navigation.state.params.igst,
                   igstV: this.props.navigation.state.params.igstV, cgstP: this.props.navigation.state.params.cgst,
                   cgstV: this.props.navigation.state.params.cgstV, sgstP: this.props.navigation.state.params.sgst,
                   sgstV: this.props.navigation.state.params.sgstV, m2wV: this.props.navigation.state.params.m2wV, 
                   whProfit: this.props.navigation.state.params.whProfit, whProfitV: this.props.navigation.state.params.whProfitV,
                   w2rT: this.props.navigation.state.params.w2rT, w2rV: this.props.navigation.state.params.w2rV,
                   rtProfit:this.props.navigation.state.params.rtProfit, rtProfitV: this.props.navigation.state.params.rtProfitV 
                 }
}

render() {
    return(
        <View>
            <ImageBackground source={require('../Assets/login.jpg')} style={Styles.bgImage}>
                <ScrollView contentContainerStyle={GStyle.container}>
                    <View>
                        <Text style={[Styles.heading, {marginTop: 20}]}>Manufacturer to Wholesaler:</Text>
                        <View style={GStyle.inputView}>
                            <Text style={[GStyle.text, {marginTop:10}]}>Production Cost</Text> 
                            <Text style={GStyle.resultText}>{this.state.pCost}</Text>
                        </View>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>Profit Margin</Text>
                            <Text style={GStyle.resultText}>{this.state.pMargin}</Text>
                        </View>

                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>Manufacture Cost</Text>
                            <Text style={GStyle.resultText}>{this.state.mCost}</Text>
                        </View>
                        <View style={GStyle.inputView}>     
                            <Text style={GStyle.text}>IGST({this.state.igstP}%)</Text> 
                            <Text style={GStyle.resultText}>{this.state.igstV}</Text>
                        </View>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>Invoice Value</Text> 
                            <Text style={GStyle.resultText}>{this.state.m2wV}</Text>
                        </View>
                    </View>
                    <View>
                        <Text style={[Styles.heading, {marginTop: 20}]}>Wholesaler to Retailer:</Text>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>Cost to Wholesaler</Text> 
                            <Text style={GStyle.resultText}>{this.state.m2wV}</Text>
                        </View>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>Profit Margin({this.state.whProfit}%)</Text> 
                            <Text style={GStyle.resultText}>{this.state.whProfitV}</Text>
                        </View>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>Total</Text> 
                            <Text style={GStyle.resultText}>{this.state.w2rT}</Text>
                        </View>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>CGST({this.state.cgstP}%)</Text> 
                            <Text style={GStyle.resultText}>{this.state.cgstV}</Text> 
                        </View>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>SGST({this.state.sgstP}%)</Text> 
                            <Text style={GStyle.resultText}>{this.state.sgstV}</Text>
                        </View>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>Invoice Value</Text> 
                            <Text style={GStyle.resultText}>{this.state.w2rV}</Text>
                        </View>  
                    </View>
                    <View>
                        <Text style={[Styles.heading, {marginTop: 20}]}>Retailer to Consumer:</Text>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>Cost to Retailer</Text> 
                            <Text style={GStyle.resultText}>{this.state.w2rV}</Text>
                        </View>
                        <View style={GStyle.inputView}>
                            <Text style={GStyle.text}>ProfitMargin({this.state.rtProfit}%)</Text> 
                            <Text style={GStyle.resultText}>{this.state.rtProfitV}</Text>
                        </View>   
                    </View>
                </ScrollView>
            </ImageBackground>
        </View>
    );
}

calculate=async（）=>{
等待这个；
this.props.navigation.navigate（'Result'，{prodCost:this.state.prodCost，
mfdProfitMargin:this.state.mfdProfitMargin，mCost:this.state.mCost，whproit:this.state.whproit，
rtprice:this.state.rtprice，cgst:this.state.cgst，sgst:this.state.sgst，igst:this.state.igst，
igstV:this.state.igstV，m2wV:this.state.m2wV，w2rT:this.state.w2rT，whProfitV:this.state.whProfitV，
cgstV:this.state.cgstV，sgstV:this.state.sgstV，w2rV:this.state.w2rV，rtProfitV:this.state.rtProfitV}）
}
计算um=（）=>{
this.setState（{mCost:Number（this.state.prodCost）+Number（this.state.mfdProfitMargin）}）；
this.setState（{igstV:（Number（this.state.mCost）*Number（this.state.igst））/100}）；
this.setState（{m2wV:Number（this.state.mCost）+Number（this.state.igstV）}）；
this.setState（{whProfitV:（this.state.m2wV）*Number（this.state.whProfit）/100}）；
this.setState（{w2rT:Number（this.state.m2wV）+Number（this.state.whProfitV）}）；
this.setState（{cgstV:（this.state.w2rT）*Number（this.state.cgst）/100}）；
this.setState（{sgstV:（this.state.w2rT）*Number（this.state.sgst）/100}）；
setState（{w2rV:Number（this.state.w2rT）+Number（this.state.cgstV）+Number（this.state.sgstV）}）；
this.setState（{rtProfitV:（this.state.w2rV）*Number（this.state.rtProfit）/100}）；
}
导出默认类结果扩展组件{
建造师（道具）{
超级（道具）；
this.state={pCost:this.props.navigation.state.params.prodCost，pMargin:this.props.navigation.state.params.mfdProfitMargin，
mCost:this.props.navigation.state.params.mCost，igstP:this.props.navigation.state.params.igst，
igstV:this.props.navigation.state.params.igstV，cgstP:this.props.navigation.state.params.cgst，
cgstV:this.props.navigation.state.params.cgstV，sgstP:this.props.navigation.state.params.sgst，
sgstV:this.props.navigation.state.params.sgstV，m2wV:this.props.navigation.state.params.m2wV，
whProfit:this.props.navigation.state.params.whProfit，whProfitV:this.props.navigation.state.params.whProfitV，
w2rT:this.props.navigation.state.params.w2rT，w2rV:this.props.navigation.state.params.w2rV，
rtProfit:this.props.navigation.state.params.rtProfit，rtProfitV:this.props.navigation.state.params.rtProfitV
}
}
render（）{
返回(
制造商对批发商：
生产成本
{this.state.pCost}
利润率
{this.state.pMargin}
制造成本
{this.state.mCost}
IGST（{this.state.igstP}%）
{this.state.igstV}
发票金额
{this.state.m2wV}
批发商到零售商：
批发商成本
{this.state.m2wV}
利润率（{this.state.whProfit}%）
{this.state.whProfitV}
全部的
{this.state.w2rT}
CGST（{this.state.cgstP}%）
{this.state.cgstV}
SGST（{this.state.sgstP}%）
{this.state.sgstV}
发票金额
{this.state.w2rV}
零售商对消费者：
零售商成本
{this.state.w2rV}
ProfitMargin（{this.state.rtProfit}%）
{this.state.rtProfitV}
);
}

}有很多状态设置，我认为我们可以减少它，我们可以做一些重构，使代码更易于阅读

建造师你一遍又一遍地输入同样的东西，这使得你的构造器比需要的更难阅读

在本例中，我们将值

this.props.navigation.state.params

设置为它自己的变量。这意味着您不必反复输入

This.props.navigation.state.params

constructor(props) {
  super(props);
  const params = this.props.navigation.state.params
  this.state = { 
    pCost: params.prodCost, 
    pMargin: params.mfdProfitMargin,
    mCost:params.mCost, 
    igstP: params.igst,
    igstV: params.igstV, 
    cgstP: params.cgst,
    cgstV: params.cgstV, 
    sgstP: params.sgst,
    sgstV: params.sgstV, 
    m2wV: params.m2wV, 
    whProfit: params.whProfit, 
    whProfitV: params.whProfitV,
    w2rT: params.w2rT, 
    w2rV: params.w2rV,
    rtProfit:params.rtProfit, 
    rtProfitV: params.rtProfitV 
  }
}

如果我们使用扩展运算符，我们可以使这变得更容易，也就是说，如果您愿意使用与正在传递的对象相同的名称

constructor(props) {
  super(props);
  this.state = { 
    ...this.props.navigation.state.params 
  }
}

但是，如果使用此方法，您将发现您选择的一些唯一名称将消失，并被对象中的名称替换

calculateSum  () => {
  let mCost = Number(this.state.prodCost) + Number(this.state.mfdProfitMargin);
  let igstV = mCost * Number(this.state.igst) / 100;
  let m2wV = mCost + igstV;
  let whProfitV = m2wV * Number(this.state.whProfit)/100;
  let w2rT = m2wV + whProfitV;
  let cgstV = w2rT * Number(this.state.cgst)/100;
  let sgstV = w2rT * Number(this.state.sgst)/100;
  let w2rV = w2rT + cgstV + sgstV;
  let rtProfitV = w2rV * Number(this.state.rtProfit)/100;
  return { mCost, igstV, m2wV, whProfitV, w2rT, cgstV, sgstV, w2rV, rtProfitV }
}

calculate = () => {
  let sum = this.calculateSum();
  this.setState({...sum}, () => {
    this.props.navigation.navigate('Result', {...this.state })
  });
}

calculate = () => {
  let sum = this.calculateSum();
  this.props.navigation.navigate('Result', {...this.state, ...sum })
}