Question

我需要使用react-navigation在2个不同的屏幕之间更改数据。默认屏幕显示注释，添加注释是在单独的屏幕中使用文本输入完成的。添加屏幕需要为默认屏幕提供一个数组。

我设法提供了一些参数，但是添加屏幕应该传递一个数组。

添加笔记类别。文本输入为笔记状态添加了新的内容。

class AddScreen extends React.Component {
  constructor(props) {
      super(props);
  }
  state = {
    textInputComponent: '',
    notes: [
     {
       text: "Note 1"
     }
    ]
  }
return(
<View>
    <TextInput style = {styles.inputField} placeholder="Write the note here"
    onChangeText={(textInputComponent) => this.setState({textInputComponent})}
    value = {this.state.textInputComponent} />
    <TouchableOpacity style = {styles.customBtn2}
      onPress={() => {this.addToList(this.state.textInputComponent)}}>
      <Text style = {styles.customBtnText}>Add note </Text>
    </TouchableOpacity>

    <TouchableOpacity style = {styles.customBtn3}
      onPress={() => navigate('Notes', {note: this.state.notes})}>
      <Text style = {styles.customBtnText2}>Add notes </Text>
    </TouchableOpacity>
</View>
);

应该在其中显示注释的默认屏幕

class NoteList extends React.Component {

  constructor(props) {
      super(props)
      this.state = {
        notes: []
        }
  }
makeNoteList(note){
    this.state.notes.push(note);
    console.log(this.state.notes);
      return (
        <View>
   {this.state.notes.map(note => {console.log(note.text)})}
        </View>
        )
    }
render() {
const {navigate} = this.props.navigation;
const {navigation} = this.props;
const note = navigation.getParam('note', 'No notes');

return(
<ScrollView style = {styles.background}>
  <View style={{flex: 1, 
                flexDirection: 'column',
                alignItems: 'center'}}>
{this.makeNoteList(note)}  
  </View>
  <View style={{flex: 1, 
                  flexDirection: 'row',
                  justifyContent: 'flex-end'}} >
    <TouchableOpacity style = {styles.customBtn}
      onPress={() => navigate('AddNotes', {name: 'AddNotes'})}>
      <Text style = {styles.customBtnText}>List of notes </Text>
    </TouchableOpacity>
    </View>
</ScrollView>
)
}
}

我似乎无法映射AddScreen类提供的参数。默认屏幕应映射给定的数组以显示注释。我知道这些代码段缺少一些花括号，也可能缺少缩短这些代码段的括号，因此在这里您可以看到完整的代码：https://snack.expo.io/rk4opjbqE

React Native Navigation将参数作为数组获取并映射数组

0 个答案: