Передача значений после нажатия на кнопку - React Native - PullRequest
Новая
       23

Передача значений после нажатия на кнопку - React Native

2 голосов
/ 14 марта 2019

Как я могу передать все значения в метод Render () после того, как я нажму на кнопку Отправить?Внутри этого метода Render () я возвращаю некоторые Flatlists, 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 })
  }
}

1 Ответ

1 голос
/ 14 марта 2019

если вы отметите здесь: 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>
      )}
    />
  )

На каждой кнопкещелкнув, переданные данные элемента будут зарегистрированы.

...