Реагировать Native Сохранение входных данных

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 вне, или как отправить новые сообщения в отличие от перезаписи существующего. Я в основном ищут помощь в этой области - ниже я разместил свой цели, если у вас возник вопрос о том, почему я хочу это сделать.

Цель: (? Повернутый)

Сохраненные «пост» должны затем быть распечатаны на вид, где она может быть нажата, чтобы отобразить содержимое тела.

Каждый раз, когда передается название и тело, они должны сохраняться как новое сообщение, а не перезаписываться.

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