陣營本地保存輸入數據

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