有没有一种方法可以在react native中隐藏多个textinput组件

Question

因此，我正在制作一个应用，在第一个屏幕上，它要求输入数字，当输入数字时，它会显示textinput是数字的数量。因此，假设num == 1，则textinput组件将在下一屏幕上显示为一个。我发现了隐藏和显示最多2个文本输入的方法，但我只能停留在3个。请帮助我。

Homescreen.js

render() {
return (
  <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={styles.container}>
      <Text style={styles.header}>GFM Calculator</Text>
      <TextInput
        style={styles.input}
        keyboardType="number-pad"
        placeholder="Enter the number of elements..."
        placeholderTextColor="#A8A8A8"
        onChangeText={(elements) => this.setState({ elements })}
        value={this.state.elements}
      />
      <View style={{ alignItems: "flex-end", marginTop: 64 }}>
        <TouchableOpacity
          style={styles.continue}
          onPress={() => {
            this.props.navigation.navigate('Calculate', {
              data: this.state.elements,
            });
          }}
        >
          <Ionicons name="md-arrow-round-forward" size={24} color="#fff" />
        </TouchableOpacity>
      </View>
      <Text style={styles.header2}>Made By Godson Umoren</Text>
    </View>
  </TouchableWithoutFeedback>
);

}}

Calculatescreen.js

    showtextinput = function (options) {

      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      }
    }


  showtextinput2 = function (options) {
    if (this.state.data == "2") {
      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      };
    } else {
      return {

       display: "none",
      };
    }
  };

  showtextinput3 = function (options) {
    if (this.state.data == "3") {
      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      };
    } else {
      return {
        display: "none",
      };
    }
  };

  showtextinput4 = function (options) {
    if (this.state.data == "4") {
      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      };
    } else {
      return {
        display: "none",
      };
    }
  };

  showtextinput5 = function (options) {
    if (this.state.data == "5") {
      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      };
    } else {
      return {
        display: "none",
      };
    }
  };

//......
 <TextInput
            style={this.showtextinput()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles1) => this.setState({ moles1 })}
            value={this.state.moles1}
          />

  <TextInput
            style={this.showtextinput2()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles2) => this.setState({ moles2 })}
            value={this.state.moles2}
          />

<TextInput
            style={this.showtextinput3()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles3) => this.setState({ moles3 })}
            value={this.state.moles3}
          />

 <TextInput
            style={this.showtextinput4()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles4) => this.setState({ moles4 })}
            value={this.state.moles4}
          />

 <TextInput
            style={this.showtextinput5()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles5) => this.setState({ moles5 })}
            value={this.state.moles5}
          />

Answer 1

您可以像这样使用map()功能：