javascript - 注入变量以响应本机表

Question

我有一个有两个屏幕的项目，用户将在第一个屏幕输入一些数字，程序会做一些操作，我通过导航将此变量传递到第二个屏幕，现在我需要在第二个屏幕中安排这些变量在一个表中，我知道如果我想返回我使用的这些变量中的一个，{JSON.parse(number9)} 但我怎样才能将这个变量集合呈现到表中

import React from "react";
import { TextInput, View, StyleSheet, Button, Text } from 'react-native';
const SolarScreen = ({ navigation }) => {
    const [number1, onChangeNumber1] = React.useState(null);
    const [number2, onChangeNumber2] = React.useState(null);
    const [number3, onChangeNumber3] = React.useState(null);
    const [number4, onChangeNumber4] = React.useState(null);
    const [number5, onChangeNumber5] = React.useState(null);
    const [number6, onChangeNumber6] = React.useState(null);
    const [number7, onChangeNumber7] = React.useState(null);
    const [number8, onChangeNumber8] = React.useState(null);
    const [number9, onChangeNumber9] = React.useState(null);
    const [number10, onChangeNumber10] = React.useState(null);
    const [number11, onChangeNumber11] = React.useState(null);
    const [number12, onChangeNumber12] = React.useState(null);
    const total1 = parseInt(number2) - parseInt(number1)
    const total2 = parseInt(number4) - parseInt(number3)
    const total3 = parseInt(number6) - parseInt(number5)
    const total4 = parseInt(number8) - parseInt(number7)
    const total5 = parseInt(number10) - parseInt(number9)
    const total6 = parseInt(number12) - parseInt(number11)
    const totalcost1 = total1 * 6.75
    const totalcost2 = total2 * 6.75
    const totalcost3 = total3 * 6.75
    const totalcost4 = total4 * 6.75
    const totalcost5 = total5 * 6.75
    const totalcost6 = total6 * 6.75

    return (
        <View style={styles.viewContainer}>
            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber1}
                    value={number1}
                    placeholder="قراءة الامس"
                    keyboardType="numeric"
                />
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber2}
                    value={number2}
                    placeholder="قراءة اليوم"
                    keyboardType="numeric"
                />
                <Text style={{ fontSize: 15 }} >عداد 1 </Text>
            </View>

            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber3}
                    value={number3}
                    placeholder="قراءة الامس"
                    keyboardType="numeric"
                />
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber4}
                    value={number4}
                    placeholder="قراءة اليوم"
                    keyboardType="numeric"
                />
                <Text style={{ fontSize: 15 }} >عداد 2 </Text>
            </View>

            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber5}
                    value={number5}
                    placeholder="قراءة الامس"
                    keyboardType="numeric"
                />
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber6}
                    value={number6}
                    placeholder="قراءة اليوم"
                    keyboardType="numeric"
                />
                <Text style={{ fontSize: 15 }} >عداد 3 </Text>
            </View>

            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber7}
                    value={number7}
                    placeholder="قراءة الامس"
                    keyboardType="numeric"
                />
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber8}
                    value={number8}
                    placeholder="قراءة اليوم"
                    keyboardType="numeric"
                />
                <Text style={{ fontSize: 15 }} >عداد 4 </Text>
            </View>

            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber9}
                    value={number9}
                    placeholder="قراءة الامس"
                    keyboardType="numeric"
                />
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber10}
                    value={number10}
                    placeholder="قراءة اليوم"
                    keyboardType="numeric"
                />
                <Text style={{ fontSize: 15 }} >عداد 5 </Text>
            </View>

            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber11}
                    value={number11}
                    placeholder="قراءة الامس"
                    keyboardType="numeric"
                />
                <TextInput
                    style={styles.input}
                    onChangeText={onChangeNumber12}
                    value={number12}
                    placeholder="قراءة اليوم"
                    keyboardType="numeric"
                />
                <Text style={{ fontSize: 15 }} >عداد 6 </Text>
            </View>

            <Button
                title="Total"
                onPress={() => navigation.navigate('Total', { total1: total1, total2: total2, total3: total3, total4: total4, total5: total5, total6: total6, totalcost1: totalcost1, totalcost2: totalcost2, totalcost3: totalcost3, totalcost4: totalcost4, totalcost5: totalcost5, totalcost1: totalcost6, totalcost6: totalcost1, number1: number1, number2: number2, number3: number3, number4: number4, number5: number5, number6: number6, number7: number7, number8: number8, number9: number9, number10: number10, number11: number11, number12: number12 })}
            />
        </View>
    );
}
const styles = StyleSheet.create({
    input: {
        flex: 1,
        height: 40,
        margin: 12,
        borderWidth: 1,
    },
    inputContainer: {
        flexDirection: "row",
    },
    viewContainer: {
        flexDirection: "column",
    },
});
export default SolarScreen

标签： javascriptreact-native