Cách nhanh nhất để chuyển đổi ứng dụng React thành React Native là gì?

Question

Đây có thể là một câu hỏi ngây thơ, nhưng tôi không thể tìm thấy quá nhiều thông tin về chủ đề này. Tôi có một ứng dụng phản ứng redux đầy đủ chức năng và bây giờ tôi muốn chuyển nó sang iOS và Android. Tôi không cần phải sử dụng bất kỳ tính năng bản địa như GPS hoặc Camera vv. Về lý thuyết, tôi chỉ muốn tạo một loại webview chạy ứng dụng React hiện có, sau đó chỉnh sửa nó cho đến khi nó trông có vẻ thể hiện rõ hơn. Nỗ lực đầu tiên của tôi là sử dụng tệp jsbundle hiện tại của tôi và dán nó vào AppDelegate làm jsCodeLocation. Điều đó có thể gây ra tất cả các loại lỗi như "cửa sổ" không được xác định.

Tôi đoán câu hỏi của mình là: làm thế nào để mọi người thường quản lý mã nguồn gốc tự nhiên và không phải gốc của họ? Họ hoàn toàn tách biệt hay có cách nào để tái chế hầu hết mã?

Answer 1

Chúng thường khá tách biệt, một phần vì mục tiêu hiển thị của bạn khác nhau (nghĩa là không có div giây) và một phần vì những thứ như window không khả dụng. Có thể sử dụng lại mã giữa web và ứng dụng gốc, nhưng chỉ khi bạn rất cẩn thận về nó.

Từ react native release blog post:

Nó đáng chú ý rằng chúng tôi không đuổi theo “viết một lần, chạy mọi nơi.” Nền tảng khác nhau có vẻ khác nhau, cảm thấy, và khả năng, và như vậy, chúng ta vẫn nên phát triển ứng dụng riêng biệt cho mỗi nền tảng

Answer 2

Một số trong những điều thể tái sử dụng là styles:

var style = { 
    box: {height: 30, width: 30, padding: 10, ect...} 
} 

Logic như trạng thái:

constructor(props){ 
super(props); 

this.state= {text: "hi"}; 
} 

nhà nước có thể được chia sẻ giữa navite và dom như vậy

<View> 
<Text>this.state.text</Text> 
</View> 

dom trông như thế này

<div>this.state.text</div> 

Bạn thậm chí có phần chức năng nhưng bạn phải phải cẩn thận như nó đã được nêu ở trên, miễn là bạn không trực tiếp gọi bất kỳ dom hoặc refs trong logic của bạn.

onClick(){ 
this.setState({text: "good bye"}); 
} 

Answer 3

WebViews và React-native là hai khái niệm hoàn toàn riêng biệt. Hoặc là bạn muốn đi với các cựu (hơn bạn thực sự có thể sử dụng ứng dụng của bạn mà không gặp rắc rối nhiều), hoặc với sau này. Trong trường hợp đó, bạn có thể tái sử dụng một số logic kinh doanh, tuy nhiên hầu hết các kết xuất sẽ phải được viết lại.

Phản ứng tự nhiên là learn once, write anywhere, không learn once, write once :)

Answer 4

Trước hết, bạn phải sử dụng phản ứng thành phần có nguồn gốc thay cho các thẻ html. Dưới đây là một liên kết cho nút, bạn có thể tìm thấy tất cả các thành phần khác ở đây chỉ https://facebook.github.io/react-native/docs/button.html#content đừng quên để nhập khẩu những thành phần từ phản ứng bản địa trong dự án của bạn

Có tùy chọn khác cũng có, bạn có thể chỉ cần tạo một phản ứng mới dự án -native và sử dụng webview trong đó và hiển thị toàn bộ trang web của bạn ở đó. https://facebook.github.io/react-native/docs/webview.html