如何在 react-native 中将读写数据源项从父视图传递到子视图？

Question

使用react-native，父视图如何将读写对象传递给子视图，在那里可以修改，然后让父视图在子视图重新渲染时重新渲染returns父视图？

我在导航器中有一个 WaypointList ListView。当用户选择一行时，DetailView 显示用于编辑的 TextInput。

// The Parent "Master View"
var WaypointList = React.createClass({

  getInitialState: function() {
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    return {
      itemList: this._genRows(),
      dataSource: ds.cloneWithRows(this._genRows()),
      editEnabled: false,
      planLocked: false,
      selectionCount: 0,
      unitType: 0,
    };
  },

  // ToDo: Turn this into a real database datasource
  _genRows: function(): Array < any > {
    var arrayList = [];
    var waypoint = new Waypoint('Waypoint1', 0.0, 0.0, 10, true);
    arrayList.push(waypoint);
    waypoint = new Waypoint('Waypoint2', 20.0, 4.0, 10, true);
    arrayList.push(waypoint);
    return arrayList;
  },

  getDataSource: function(waypoints: Array < any > ): ListView.DataSource {
    return this.state.dataSource.cloneWithRows(waypoints);
  },

  selectRow: function(waypoint: Object) {
    this.props.navigator.push({
      title: waypoint.name,
      component: WaypointScreen,
      passProps: {
        waypoint: waypoint,
      },
    });
  },
});

// The Child "Detail View"
// How can I modify an object passed into the "Detail View"
// passProps appears to be read-only ?
var DetailView = React.createClass({

      textInputValue: null,

      getInitialState: function() {
        console.log('name:', this.props.person.name);
        console.log('age:', this.props.person.age);
        return {
          textDistance: this.props.waypoint.distance.meters.toString(),
          textDepth: this.props.waypoint.depth.meters.toString(),
        };
      },

      render: function() {
          return ( < View style = {
                {
                  flexDirection: 'row',
                  justifyContent: 'center'
                }
              } >
              < TextInput style = {
                styles.textInput
              }
              ref = 'distance1'
              placeholder = "Enter meters"
              editable = {
                isEditable
              }
              keyboardType = "decimal-pad"
              returnKeyType = 'next'
              onChangeText = {
                (text) => {
                  text = text.replace(/\D/g, '');
                  var meters = parseFloat(text);
                  this.setState({
                    textDistance: text
                  });
                }
              }
              value = {
                this.state.textDistance
              }
              onSubmitEditing = {
                (event) => {
                  this.refs.depth1.focus();
                }
              }
              />

      <View style={styles.separatorHorizontal} / >
              < /View>

    );
  },
});

我大约 2 周前开始学习 react-native，但我还没有找到解决方案。

passProps 只针对只读信息吗？

如何实现数据源的读写修改？

提前致谢。

非常感谢任何提示或指导，

-埃德

Answer 1

您需要在父级中设置状态，并将该状态作为道具传递给子级。当子元素更改为您需要的新值时，您可以为重置父状态的父元素设置一个回调函数，这反过来会重置使用该值的任何子元素的道具。

查看 this 非常基本的示例：

https://rnplay.org/apps/huQTKA

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} = React;

var Parent = React.createClass({

  getInitialState() {
        return { text: '' }
    },

  onChange(text){
    this.setState({ text })
  },

  render() {
    return (
      <View style={styles.container}>
        <Text>Hello, { this.state.text }</Text>
        <Child text={ this.state.text } onChange={ this.onChange } />
     </View>
    );
  }
});       

var Child = React.createClass({
  render() {
    return (
      <View style={styles.container2}>
        <TextInput onChangeText={ (text) => this.props.onChange(text) } style={ styles.textInput }  />
        <Text>{ this.props.text }</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:50
  },
  container2: {
    marginTop:25
  },
  textInput: {
    height: 60,
    backgroundColor: '#efefef',
    borderBottomWidth: 1,
    borderBottomColor: '#ededed',
    marginTop:13,
    marginBottom:13
  }
});

AppRegistry.registerComponent('Parent', () => Parent);

如何在 react-native 中将读写数据源项从父视图传递到子视图？

How to pass a read write datasource item from parent to child view in react-native?

listview

datasource

react-native