Sử dụng rơle trong ứng dụng gốc phản ứng

Question

Làm cách nào để hiển thị điểm cuối graphql để phản ứng ứng dụng gốc? Có ai sử dụng relay trong ứng dụng bản địa phản ứng? Các ví dụ trong tổng quan về kỹ thuật của rơle webpack https://facebook.github.io/relay/docs/getting-started.html sử dụng để phục vụ ứng dụng relay và vạch trần nó đến một máy chủ graphql:

import express from 'express'; 
import graphQLHTTP from 'express-graphql'; 
import path from 'path'; 
import webpack from 'webpack'; 
import WebpackDevServer from 'webpack-dev-server'; 
import {StarWarsSchema} from './data/starWarsSchema'; 

const APP_PORT = 3000; 
const GRAPHQL_PORT = 8080; 

// Expose a GraphQL endpoint 
var graphQLServer = express(); 
graphQLServer.use('/', graphQLHTTP({schema: StarWarsSchema, pretty: true})); 
graphQLServer.listen(GRAPHQL_PORT,() => console.log(
    `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}` 
)); 

// Serve the Relay app 
var compiler = webpack({ 
    entry: path.resolve(__dirname, 'js', 'app.js'), 
    eslint: { 
    configFile: '.eslintrc' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     query: { 
      stage: 0, 
      plugins: ['./build/babelRelayPlugin'] 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'eslint' 
     } 
    ] 
    }, 
    output: {filename: 'app.js', path: '/'} 
}); 
var app = new WebpackDevServer(compiler, { 
    contentBase: '/public/', 
    proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`}, 
    publicPath: '/js/', 
    stats: {colors: true} 
}); 
// Serve static resources 
app.use('/', express.static('public')); 
app.use('/node_modules', express.static('node_modules')); 
app.listen(APP_PORT,() => { 
    console.log(`Relay Star Wars is now running on http://localhost:${APP_PORT}`); 
}); 

nhưng phản ứng sử dụng có nguồn gốc bản địa phản ứng đóng gói để gói các module của nó; có ai đã thử sử dụng chuyển tiếp trong ứng dụng gốc phản ứng không?

Answer 1

Giờ đây, bạn có thể sử dụng phản ứng gốc và chuyển tiếp cùng nhau.

Github thông báo:https://github.com/facebook/relay/issues/26

Hướng dẫn cho các ứng dụng RN hiện:http://pulse.mixrt.com/discussion/26/technical-making-relay-work-with-existing-react-native-apps-a-step-by-step-tutorial.

Bản sao các hướng dẫn:

1. Sao lưu dự án của bạn.
2. Đảm bảo bạn có sẵn sàng máy chủ GraphQL và tệp schema.json của bạn. Để biết thêm chi tiết về sau, hãy truy cập trang dự án React-Relay.
3. Đảm bảo rằng bạn đang sử dụng `npm` phiên bản 3 trở lên.
4. Nếu trình đóng gói của React Native (`khởi đầu phản ứng gốc ') đang chạy ở đâu đó trong nền, bạn nên dừng ngay bây giờ.
5. Chạy:

   watchman watch-del-all

   và cũng:

   rm -rf $TMPDIR/react-*

   để tránh gặp phải sự cố về trình đóng gói đã biết (https://github.com/facebook/react-native/issues/4968).
6. Xóa thư mục `./Node_modules` khỏi dự án của bạn.
7. Chỉnh sửa tệp `package.json` của bạn, đảm bảo tệp có các thông tin sau:

    "dependencies": { 
        "react": "^0.14.7", 
        "react-native": "facebook/react-native", 
        "react-relay": "^0.7.3" 
       }, 
       "devDependencies": { 
        "babel-core": "^6.6.4", 
        "babel-preset-react-native": "^1.4.0", 
        "babel-relay-plugin": "^0.7.3" 
       }

   Phiên bản Babel đặc biệt quan trọng. Đảm bảo rằng dự án của bạn sử dụng babel 6.5 hoặc mới hơn, chúng tôi cần nó cho tính năng passPerPreset trong tệp .babelrc.
8. Tạo một file `.babelrc` mới và đặt nó trong thư mục của dự án của bạn:

    { 
        "presets": [ 
        "./scripts/babelRelayPlugin", 
        "react-native" 
        ], 
        "passPerPreset": true 
       }

9. Tạo một file mới trong thư mục của dự án của bạn được gọi là 'babelRelayPlugin.js` với nội dung sau:

    const getBabelRelayPlugin = require('babel-relay-plugin'); 
       const schema = require('./schema.json'); 
   
       module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };

   Sao chép tệp `schema.json` của bạn vào thư mục của dự án.
10. Chạy:

    npm install

Answer 2

1. bạn cần phải cài đặt react-relay gói cho react-native ứng dụng

2. Trước khi điểm nhập cảnh của ứng dụng phản ứng-mẹ đẻ của bạn, tiêm lớp mạng với url bạn tiếp xúc

Relay.injectNetworkLayer(
 
    new Relay.DefaultNetworkLayer('http://localhost:8000/graphql') 
 
);

Answer 3

Bạn có thể tìm thấy phiên bản đang hoạt động trong here, cho đến khi this được giải quyết.