Как передать прочитанный элемент данных источника данных от родительского к дочернему виду в native-native?

Question

Использование response-native, как родительский вид, передать объект чтения-записи дочернему представлению, где он может быть изменен, а затем повторить рендер родительского представления, когда ребенок возвращается к родительскому представлению?

У меня есть ListViewList 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-х недель назад пока я не ближе к выяснить решение.

Являются ли passProps доступными только для чтения?

Как можно выполнить модификацию источника данных для чтения и записи?

Заранее спасибо.

Любые советы и направления очень ценятся,

-ED

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