如何使用StackNavigator发送多个参数?

时间:2018-05-22 10:44:17

标签: 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 个答案:

答案 0 :(得分:2)

您可以尝试这样

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

答案 1 :(得分:1)

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


navigate({ 
     routeName: 'EditNote' , 
     params: { 
       notesArray: getNoteArray(),
      key
     }
   });