Meteor-like methods for React Native.
The purpose of this library is :
npm i --save react-native-meteor@latest
!! See detailed installation guide
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Meteor, { createContainer } from 'react-native-meteor';
Meteor.connect('ws://192.168.X.X:3000/websocket');//do this only once
class App extends Component {
renderRow(todo) {
return (
<Text>{todo.title}</Text>
);
}
render() {
const { settings, todosReady } = this.props;
<View>
<Text>{settings.title}</Text>
{!todosReady && <Text>Not ready</Text>}
<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
renderRow={this.renderRow}
/>
</View>
}
}
export default createContainer(params=>{
const handle = Meteor.subscribe('todos');
Meteor.subscribe('settings');
return {
todosReady: handle.ready(),
settings: Meteor.collection('settings').findOne()
};
}, App)
Since Meteor 1.3, createContainer is the recommended way to populate your React Components.
Very similar to getMeteorData but your separate container components from presentational components.
import Meteor, { createContainer } from 'react-native-meteor';
class Orders extends Component {
render() {
const { pendingOrders } = this.props;
//...
);
}
}
export default createContainer(params=>{
return {
pendingOrders: Meteor.collection('orders').find({status: "pending"}),
};
}, Orders)
connectMeteor is a React Mixin which enables getMeteorData (the old way of populating meteor data into your components).
import Meteor, { connectMeteor } from 'react-native-meteor';
/*
* Uses decorators (see detailed installation to activate it)
* Or use :
class Todos extends Component {
...
}
connectMeteor(Todos);
export default Todos;
*/
@connectMeteor
class Orders extends Component {
getMeteorData() {
return {
pendingOrders: Meteor.collection('orders').find({status: "pending"}),
};
}
render() {
const { pendingOrders } = this.data;
//...
);
}
}
These variables can be used inside getMeteorData or createContainer. They will be populated into your component if they change.
These methods (except update) work offline. That means that elements are correctly updated offline, and when you reconnect to ddp, Meteor calls are taken care of.
Same as ListView Component but does not need dataSource and accepts three arguments :
collection
string required
selector
[string / object]options
object
listViewRef
[string / function] ref to ListView component.<MeteorListView
collection="todos"
selector={{done: true}}
options={{sort: {createdAt: -1}}}
renderRow={this.renderItem}
//...other listview props
/>
Same as ListView Component but does not need dataSource and accepts one argument. You may need it if you make complex requests combining multiples collections.
elements
function required : a reactive function which returns an array of elements.listViewRef
[string / function] ref to ListView component.<MeteorComplexListView
elements={()=>{return Meteor.collection('todos').find()}}
renderRow={this.renderItem}
//...other listview props
/>
Connect to a DDP server. You only have to do this once in your app.
Arguments
url
string required
options
object Available options are :
Disconnect from the DDP server.
Example `import { composeWithTracker } from 'react-native-meteor';``
See documentation.
`import { Accounts } from 'react-native-meteor';``
import { FSCollectionImagesPreloader } from 'react-native-meteor';
<FSCollectionImagesPreloader
collection="imagesFiles"
selector={{metadata.owner: XXX}}
/>
Once connected to the ddp server, you can access every method available in ddp.js.
componentWillMount() {
this.scenes = Actions.create(
<Scene key="root" component={createContainer(this.composer, Switch)} selector={this.selector} tabs={true}>
<Scene key="loading" hideNavBar={true} component={Loading} />
<Scene key="login" hideNavBar={true}>
<Scene key="loginbis" component={Login} />
</Scene>
<Scene key="loggedIn" component={Layout}>
<Scene key="main" hideNavBar={true}>
//...
</Scene>
</Scene>
</Scene>
);
}
composer() {
return {
connected: Meteor.status().connected,
user: Meteor.user()
}
}
selector(data, props) {
if(!data.connected) {
return "loading";
} else if (!data.user) {
return "login";
} else {
return "loggedIn";
}
}
Pull Requests and issues reported are welcome ! :)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。