React Native-如何保存字段的结果

时间:2018-09-18 23:48:50

标签: reactjs forms react-native input storage

我有这样的应用程序:https://i.gyazo.com/4cfe178d3a59bf4e7449a7aacd0f114e.png 这是一个玩喝酒游戏的应用程序:p。我想保存所有已输入的四个输入以及用户添加的字段之前和之后的所有输入

import React, { Component } from 'react';
import {
  View,
  Text,
  Button,
  ScrollView,
  TextInput,
  TouchableOpacity,
  StatusBar
} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { style } from './style';

class Form extends Component {
  constructor(props) {
    super(props);
    StatusBar.setBarStyle('light-content', true);
    console.log(this.props);
    state = {
        users: [{
            id:1,
            prenom:''
        }, {
            id:2,
            prenom:''
        }, {
            id:3,
            prenom:''
        }, {
            id:4,
            prenom:''
        }]
    }
  }

  saveUser = value => {
    console.log('test');
  };

  showInput() {
    return state.users.map((item) => {
        console.log(item);
        return (
            <TextInput
                key={item.id}
                style={style.input}
                placeholder={`Prénom ${item.id}`}
                placeholderTextColor="#29235c"
                />
        );
    });
   }

  render() {
    return this.props.fontLoaded ? (
      <View style={style.bgWhite}>
        <ScrollView>
            {
                 this.showInput()
            }
          <View style={style.morePlayer}>
            <Text style={style.morePlayerText}>+</Text>
          </View>
        </ScrollView>
        <View style={style.center}>
          <TouchableOpacity
            activeOpacity={0.9}
            onPress={() => this.props.navigation.navigate('Game')}
            style={style.btnPlay}
          >
            <Text style={style.textPlay}>ON TEASE!</Text>
          </TouchableOpacity>
          <Button title="Go to Details" onPress={() => this.props.navigation.navigate('Game')} />
        </View>
      </View>
    ) : null;
  }
}

export default Form;

我应该将其保存在异步存储中吗?我想将参数中所有输入值传递给其他屏幕。

谢谢

1 个答案:

答案 0 :(得分:0)

如果只需要将参数传递到另一个屏幕,则只需传递一个对象作为Navigation的第二个参数。

this.props.navigation.navigate('Game', {
    users: this.state.users,
    otherParam: 'anything you want here',
});