1)Компонент - это class extends Component
, View-элемент, который выполняет свою логику. Например, кнопочка, при нажатии на которую выполняется функция обновления данных, передаваемая из родителя:
button.js:
'use strict';
import React, {
PropTypes,
Component
} from 'react';
import {
TouchableHighlight,
Text
} from 'react-native';
let Button = class extends Component {
constructor(props) {
super(props);
}
render() {
return (<TouchableHighlight onPress={this._update.bind(this)}>
<Text>Update</Text>
</TouchableHighlight>
);
}
_update() {
this.props.update();
}
}
Button.propTypes = {
update: PropTypes.func
}
export default Button;
parent.js:
'use strict';
import React, {
Component
} from 'react';
import {
View,
Text
} from 'react-native';
import Button from './button.js';
class Parent extends Component {
constructor(props) {
super(props);
this.state={
valueToUpdate: ''
};
}
render() {
return (<View>
<Text>{this.state.valueToUpdate}</Text>
<Button update={this.update.bind(this)}/>
</View>
);
}
update() {
this.setState({valueToUpdate: 'Updated!'});
}
}
Логика по работе с сетью запихивается во внутреклассовый метод, например в метод update
в примере. Если метод используется в нескольких классах, его можно экспортировать:
'use strict';
import React from 'react';
const getSomething = (data, callback) => {
fetch('someurl/get/something.php', {
method: 'POST',
dataType: 'json',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
data: data
})
})
.then((response) => { return response.json() })
.then((responseData) => { return responseData; })
.then((newData) => {
callback(newData);
})
}
export default getSomething;
И вызывать из компонента:
...
import getSomething from './getSomething.js';
...
update(newData) {
this.setState({data: newData});
}
...
getSomething(this.state.data, this.update.bind(this));
...
2)Динамическое создание View-элементов выглядит как-то так:
...
let myViews=[];
class Parent extends Component {
constructor(props) {
super(props);
}
render() {
return (<View>
{myViews}
<TouchableHighlight onPress={this._addView}>
<Text>AddView</Text>
</TouchableHighlight>
</View>
);
}
_addView() {
myViews.push((<Text>New View is created!</Text>));
}
}
Насчёт использования кода с Android, я поднял здесь эту тему и сам жду ответа: React Native: Android UI component