React Native 保存输入数据

Question

我想要两个文本字段：

• 接受标题
• 另一个接受正文（即更多文本）

...还有一个提交按钮：

• 点击时保存输入的标题和正文

我研究了 TextInput、AsyncStorage、TouchableHighlight 和 Navigator 组件以及一堆 react-native 教程。我似乎找不到任何一致性——甚至从 react-native 文档中也找不到。

这是我目前所拥有的：

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，或者如何发布 new 消息而不是覆盖现有消息。我主要是在该领域寻求帮助 - 下面我发布了我的目标，以防出现我为什么要这样做的问题。

目标：

然后应该将保存的“帖子”打印到视图中，可以在其中按下（点击？）以显示正文的内容。

每次提交标题和正文时，都应将它们保存为新的“帖子”，而不是被覆盖。

Answer 1

如果你想为此使用异步，你需要一个函数来保存数据：

_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
  })
})