阵营本地保存输入数据

Question

我想有两个文本字段：

• 一个接受标题
• 另一种接受体（即多个文本）

...和一个提交按钮：

• ，节约已输入，点击时标题和正文

我已经研究的TextInput，AsyncStorage，TouchableHighlight和导航器组件以及一堆反应天然教程。我似乎无法找到任何一致性 - 甚至从反应原生文档中也没有。

这是我到目前为止有：

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出来，或如何发布新消息而不是在覆盖现有之一。我主要是在这方面寻求帮助 - 下面我已经发布了我的目标，这就意味着我为什么要这样做。

目标：（？抽头）

保存的“后”应当然后被打印到一个视图，在那里它可被按压，以显示主体的内容。

每次提交标题和正文时，都应将其保存为新的“发布”，而不是覆盖。

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