Как отправить несколько параметров с помощью StackNavigator?

Andy95 спросил: 28 апреля 2018 в 09:04 в: react-native

Я пытаюсь отправить массив и ключ на другой экран с помощью StackNavigator, но он говорит мне, что программа не видит функцию getNoteArray().

getNoteArray(){
    return this.state.noteArray;
}editMethod(key){
    const {navigate} = this.props.navigation;
    navigate('EditNote' , {noteArray: this.getNoteArray(), key});
}

Вот экран EditNote:

import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
AsyncStorage,
    } from 'react-native';import Note from './Note.js';export default class EditNote extends Component {
        static navigationOptions = {
        title: 'Edit',
    };    constructor(props){
         super(props);
        this.state = {
            noteArray: [],
            noteText: '',
        };
    }
    componentDidMount(){
        this.setState({noteArray: this.props.navigation.state.params.noteArray})
        alert(this.state.noteArray);
    }    render() {
        const {params} = this.props.navigation.state;
        return (
            <View style={styles.container}>
                <View style={styles.noteBody}>
                    <TextInput 
                        multiline = {true}
                        numberOfLines = {1000000}
                        style={styles.textInput}
                        placeholderTextColor='grey'
                        underlineColorAndroid='transparent'>
                    </TextInput>
                </View>
            </View>
        );
    }}const styles = StyleSheet.create({
container: {
    flex: 1,
},
noteBody:{
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 10,
    alignItems: 'center',
    borderBottomWidth:1,
    borderTopColor: '#000',
    marginBottom: 100,
},
textInput: {
    alignSelf: 'stretch',
    textAlignVertical: 'top',
    backgroundColor: '#fff',
    color: '#000',
    padding: 20,
    borderTopWidth:2,
    borderTopColor: '#ededed',
},
addButton: {
    position: 'absolute',
    zIndex: 11,
    left: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    width: 300,
    backgroundColor: '#00FF00',
    height: 60,
    elevation: 8
},
addButtonText: {
    color: '#fff',
    fontSize: 24,
},});

2 ответа

Есть решение
agent_hunt ответил: 28 апреля 2018 в 09:09

https://reactnavigation.org/docs/en/navigation-prop.html#navigate-link-to-other-screens Синтаксис

navigation.navigate({routeName, params, action, key}) 
  OR 
navigation.navigate(routeName, params, action)

Таким образом, это может быть

navigate('EditNote' , { notesArray: getNoteArray(), key} ); 
   ORnavigate({ 
     routeName: 'EditNote' , 
     params: { 
       notesArray: getNoteArray(),
      key
     }
   }); 
Andy95 ответил: 28 апреля 2018 в 09:26
В самом деле. Но когда я перехожу к экрану, он не видит функцию getNoteArray()
agent_hunt ответил: 28 апреля 2018 в 09:31
Может быть, другая проблема. Вы хотите добавить новый вопрос или добавить этот код?
Andy95 ответил: 28 апреля 2018 в 09:34
Я думаю, что отредактирую этот код. Дайте мне пару минут.
Andy95 ответил: 28 апреля 2018 в 09:38
Там. Я думаю, что это должно его покрыть.
agent_hunt ответил: 28 апреля 2018 в 09:53
Это методы жизненного цикла компонентов. Для этого конкретного случая использования вам не требуется внутреннее состояние, поскольку данные поступают из родительского навигационного контейнера, который правильно устанавливает его в реквизитах. Вам нужно будет обрабатывать условие null / undefined в методе рендеринга
Prabhu ответил: 28 апреля 2018 в 09:06

Вы можете попробовать как это

editMethod(key){
    const {navigate} = this.props.navigation;
    navigate('EditNote',{ params1:'hello',params2:'hi'});
}