Question

我有一个项目，我从API提取一些数据，并在React Native中渲染这些数据。渲染后，我将显示一个文档列表，当我单击其中一个文档时，会将一些值传递到下一页，其中包括名称，文档说明和输入字段。然后我在文件上签名。

因此，我想记录所有这些值（标题，描述，用户输入值和用户签名），并使用fetch（）将它们发布到我的服务器上。

如果您需要进一步的说明，请告诉我，谢谢您的建议！

以下是我要显示所有内容的班级代码，我认为您不需要主页代码：

    class DetailScreen extends React.Component {
  state = {
    isModalVisible: false
  };

  _toggleModal = () =>
    this.setState({ isModalVisible: !this.state.isModalVisible });

  constructor(props) {
    super(props);
    this.state = {
      signature: null,
    }
    this.postToBmp();
  }

  static navigationOptions = {
    title: 'Content of selected'
  };

  handleSignature = signature => {
    this.setState({ signature }), this.setState({ isModalVisible: false });
  };

  postToBmp = () => {
    fetch('https://myurl', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Connection': 'Keep-Alive',
      },
      credentials: 'include',
      body: JSON.stringify({
        from: 'test@test.dk',
        attachmentName: 'The PDF file name',
        recipientFullName: 'My name',
        to: [
          '<test@test.com>'
        ]
      })
    })
  }


  renderTextandInputs = (obje) => {
    console.log("KEYVALUES:", obje.keyValues)
    var keyvalue_to_json = JSON.parse(obje.keyValues);
    var foundTextFields = [];
    for (let i = 0; i < keyvalue_to_json.length; i++) {
      if (keyvalue_to_json[i].type === 'textfield') {
        foundTextFields.push(<TextInput style={{ borderWidth: 1, flex: 1, alignItems: 'flex-start' }}>{keyvalue_to_json[i].placeholderText}</TextInput>)
      }
    }
    return (
      <View>
        <ListItem
          title={obje.name}
          subtitle={obje.description}
        />
        <View >
          {foundTextFields}
        </View>
      </View>
    )
  }

  render() {
    const style = `.m-signature-pad--footer
    .button {
      background-color: red;
      color: #FFF;
    }`;
    const obj = this.props.navigation.state.params.item;
    var propsArray = [];
    const itemArray = Object.assign(obj)
    propsArray.push(itemArray)

    keyExtractor = (item, index) => {
      return index.toString();
    }
    return (
      <View style={{ flex: 1, justifyContent: "center" }}>
        <View style={{ flex: 1, alignItems: 'stretch' }}>
          <FlatList
            key={propsArray.key}
            data={propsArray}
            renderItem={({ item }) => this.renderTextandInputs(item)}
          />
        </View>
        <View >
          {this.state.signature ? (
            <Image
              resizeMode={"contain"}
              style={{ width: 150, height: 114 }}
              source={{ uri: this.state.signature }}
            />
          ) : null}
        </View>
        <Modal isVisible={this.state.isModalVisible}
          onBackdropPress={() => this.setState({ isModalVisible: false })}
        >
          <View style={{ flex: 1 }}>
          </View>
          <Signature
            width="100"
            onOK={this.handleSignature}
            descriptionText="Please draw your signature"
            clearText="Clear"
            confirmText="Save"
            webStyle={signature_styles}
          />
        </Modal>
        <View>
          <Button title="SIGN" onPress={this._toggleModal} />
        </View>
      </View>
    );
  }

这是主页的屏幕截图，我在其中显示API的文档列表：

这是第二页的屏幕截图，我在其中显示API的名称，描述，文本输入，并使用组件对文档进行签名：

一次将多个参数发布到服务器-React Native

0 个答案: