0

如何正确地将列表传输到屏幕，通过导航器并从事件屏幕获取，以使用根组件编辑列表？

这段代码在 App 和屏幕组件之间传输和返回数​​据的部分并不完全有效。

带有父元素的文件：

应用程序.js

import React from 'react';
import { AppRegistry } from 'react-native'
import { TabNavigator, StackNavigator } from 'react-navigation'; // 1.0.0-beta.21

import EditScreen from './Screens/EditScreen';
import MainScreenT1 from './Screens/MainScreenT1';
import MainScreenT2 from './Screens/MainScreenT2';

let groceries = [{loc: 0, text: 'Apples'},
            {loc: 1, text: 'Bananas'},
            {loc: 0, text: 'Oranges'},
            {loc: 0, text: 'Mandarins'},
            {loc: 1, text: 'Cucumbers'},
            {loc: 0, text: 'Tomatoes'},
            {loc: 1, text: 'Milk'},
            {loc: 1, text: 'Potato'},
            {loc: 0, text: 'Coffee'},
            {loc: 0, text: 'Sugar'},
            {loc: 1, text: 'Candies'},
            {loc: 1, text: 'Sausage'},
            {loc: 0, text: 'Bread'},
            {loc: 0, text: 'Butter'},
            {loc: 1, text: 'Meat'},
            {loc: 1, text: 'Whiskey'},]

export default class App extends React.Component {
   state = {grList: groceries}
   
   onAddGr = (nText) => {
     const {grList} = this.state
 
     this.setState({
       grList: [{loc:0, text:nText}, ...grList],
     })
     groceries = grList
   }
   
   onLeft = (index) => {
    let {grList} = this.state
    grList[index].loc = 1
    this.setState({
      grList
    })
    groceries = grList
  }
  
  onRight = (index) => {
    let {grList} = this.state
    grList[index].loc = 0
    this.setState({
      grList
    })
    groceries = grList
  }
  
   onRemoveGr = (index) => {
     const {grList} = this.state
     this.setState({
       grList: grList.filter((gr, i) => i !== index),
     })
   }
   
  render() {
    const MainNavigator = StackNavigator({
      Main: { screen: TabNavigator({
        Tab1: { screen: MainScreenT1 },
        Tab2: { screen: MainScreenT2 },
      }, {
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        tabBarOptions: {
          showIcon: true,
          showLabel: false,
          activeTintColor: '#000000',
          inactiveTintColor: '#A4A4A4',
          indicatorStyle:{ 
            backgroundColor: '#FFFFFF',
          },
          style: {
            backgroundColor: '#ffffff',
          },
        }
      }
      )},
      Edit: { screen: EditScreen },
    },{
      navigationOptions: { header: false },
    })

    return (
      <MainNavigator
        grList={this.state}
        onSwipeLeftItemM ={this.onLeft} 
        onSwipeRightItemM = {this.onRight}
        onAddGrM = {this.onAddGr}
        onRemoveGrM = {this.onRemoveGr}
      />
    );
  }
}

AppRegistry.registerComponent('App', () => App)

这三个屏幕大体上是相似的：

EditScreen.js

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, } from 'react-native';
import Modal from 'react-native-modal' // 5.0.0


import Input from '../Components/Input'
import DellList from '../Components/DellList'

class EditScreen extends React.Component {
    state = {
     isModalVisible: false
   }
 
   _showModal = () => this.setState({ isModalVisible: true })
 
   _hideModal = () => this.setState({ isModalVisible: false })
   
   render() {
    const {grList} = this.props
    const { navigate } = this.props.navigation;
     
    const {onAddGrM} = this.props
    const {onRemoveGrM} = this.props
    
    return (
      <View style={styles.back}>
         <View style={{ height: 25,}} />
         
         <View style={styles.topPanel}>
           <TouchableOpacity style={styles.cell} onPress={this._showModal}>
             <Text style={styles.headText} > + </Text>
           </TouchableOpacity>
           <View style={{flex: 2, height: 50, backgroundColor: 'white'}}>
             <Text style={styles.headText}> Groceries </Text>
           </View>
           <TouchableOpacity style={styles.cell} onPress={() => navigate('Main')}>
             <Text style={styles.headText}> Done </Text>
           </TouchableOpacity>
         </View>
         
         <View style={{flex: 1}}>
           <DellList 
           list={grList}
           onPressItem= { (index) => {onRemoveGrM(index)}}
           />
         </View>
         
         <Modal isVisible={this.state.isModalVisible} style={styles.forModal}>
           <View style={{ flex: 1 }}>
             <Input
               placeholder={'Type here, then hit enter!'}
               onSubmitEditing={ (text) => {onAddGrM(text)}}
               onCancel={this._hideModal}
             />
           </View>
         </Modal>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
  back: {
    backgroundColor: '#E5E5E5',
    flex: 1,
  },
  forModal: {
    backgroundColor: 'white',
  },
  topPanel: {
    marginBottom: 1,
    height: 50,
    flexDirection: 'row',
  },
  headText: {
    marginTop: 15,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  cell: {
    flex: 1, 
    height: 50, 
    backgroundColor: 'white',
  },
});

export default EditScreen;

4

1 回答 1

0

我在更新变量并将它们传递给屏幕时遇到了类似的问题。我不断地遇到一些建议，redux 会解决它。我看了一下 redux，然后开始处理我的数据并尝试更新和传递它。当我真正花时间学习 redux 时，我的问题很快就解决了。至少花时间看一下 Dan Abramov（项目的创建者）的教程并试一试。链接到页面

于 2018-02-08T17:37:54.053 回答