Question

单击“发送”按钮后，如何在Render（）方法中传递所有值？在此Render（）方法内部，我返回了一些Flatlist，Views，Signature等。因此，仅通过单击一个按钮，就可以将所有这些值传递到另一个页面。

如果您的问题不清楚，请告诉我，以便我补充说明。

请参见下面的代码（已编辑）。

感谢您的任何建议或帮助！

编辑：

    renderTextandInputs = (obje) => {
    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>
        <ScrollView>
          <ListItem
            title={obje.name}
            subtitle={obje.description}
          />

        </ScrollView>
        <View >
          {foundTextFields}
        </View>
      </View>

    )
  }


  render() {

    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>
        <View>
          <FlatList
            key={this.keyExtractor}
            data={propsArray}
            renderItem={({ item }) => this.renderTextandInputs(item)}
          />
        </View>    
        <View >
          {this.state.signature ? (
            <Image
              resizeMode={"contain"}
              source={{ uri: this.state.signature }}
            />
          ) : null}
        </View>

        <Modal isVisible={this.state.isModalVisible}
          onBackdropPress={() => this.setState({ isModalVisible: false })}
        >       
          <Signature
            width="100"
            onOK={this.handleSignature}
            descriptionText="Sign"
            clearText="Clear"
            confirmText="Save"
            webStyle={style}
          />
        </Modal>

        <View>
          <Button title="SIGN" onPress={this._toggleModal} />
        </View>

        <View>
          <Button title="Send" onPress={this._onSendDoc} />
        </View>

      </View>
    );
  }

_onSendDoc = (item) => {
    this.props.navigation.navigate('Detail', { item: item })
  }
}

Answer 1

如果您在此处选中：https://facebook.github.io/react-native/docs/flatlist，则可以按以下方式为每个平面清单项目呈现一个按钮：

编辑

_onSendAll = () => {
  const obj = this.props.navigation.state.params.item;
  var propsArray = [];
  const itemArray = Object.assign(obj)
  propsArray.push(itemArray)

  this.props.navigation.navigate("Detail", { allData: propsArray });
};


_onSendDoc = item => {
  this.props.navigation.navigate("Detail", { item: item });
};

render() {
  return (
    <FlatList
      data={[{title: 'Title Text', key: 'item1'}]}
      renderItem={({item}) => (
        <TouchableHighlight
          onPress={() => this._onSendDoc(item)}
          <View style={{backgroundColor: 'white'}}>
            <Text>{item.title}</Text>
          </View>
        </TouchableHighlight>
      )}
    />
  )

在每个单击的按钮上，将记录通过的项目数据。

单击按钮后传递值-React Native

1 个答案: