Question

我想有两个文本字段：

接受标题的人
接受身体的另一个人（即更多文字）

...和提交按钮：

保存输入的标题和正文，点击后

我研究过 TextInput ， AsyncStorage ，TouchableHighlight和Navigator组件以及一堆反应原生教程。我似乎无法找到任何一致性 - 甚至不是来自本地反应文档。

这是我到目前为止所做的：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AsyncStorage,
  TextInput,
  TouchableHighlight
} from 'react-native';

class PostAndSave extends Component {

  constructor(props) {
    super(props);
    this.state = {
      messageTitle: '',
      messageBody: ''
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Walker app
        </Text>
        <TextInput
          placeholder="Title"
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChange={(event) => this.setState({messageTitle: event.nativeEvent.text})}
          value={this.state.messageTitle} />
        <TextInput
          placeholder="Body"
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChange={(event) => this.setState({messageBody: event.nativeEvent.text})}
          value={this.state.messageBody} />
        <TouchableHighlight onPress={this._onPressButton} style={styles.button}>
          <Text style={styles.buttonText}>See all posts</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

// styles here

AppRegistry.registerComponent('PostAndSave', () => PostAndSave);

我可以输入输入字段，但无法识别AsyncStorage，或者如何发布新消息而不是覆盖现有消息。我主要是在那个区域寻求帮助 - 下面我发布了目标，这就是为什么我想要这样做的问题。

目标：

已保存的帖子＆＃39;然后应该打印到一个视图，在那里可以按下（轻拍？）以显示身体的内容。

每次提交标题和正文时，都应将其保存为新的帖子＆＃39;而不是被覆盖。

Answer 1

如果你想为此使用Async，你需要一个保存数据的功能：

_onPressButton () {
  // Get the data
  let title = this.state.messageTitle
  let message = this.state.messageBody

  // Retrieve the existing messages
  AsyncStorage.getItem('messages', (res) => {
    var messages

    // If this is the first time, set up a new array
    if (res === null) {
      messages = []
    }else {
      messages = JSON.parse(res)
    }

    // Add the new message
    messages.push({
      title: title,
      message: message
    })

    // Save the messages
    AsyncStorage.setItem('messages', JSON.stringify(messages), (res) => {})
  }
}

并且您希望将其绑定到您的实例：

<TouchableHighlight onPress={this._onPressButton.bind(this)} style={styles.button}>

要检索您的消息以供日后使用：

AsyncStorage.getItem('messages', (res) => {
  this.setState({
    messages: res
  })
})

反应本机保存输入数据

1 个答案: