We have started using react-native in our project, so Swift learns to lay down a period of time, studied RN for one months, and today shares the learning process:
Study Data collation:
1, react-native Chinese network: http://reactnative.cn/docs/0.27/getting-started.html (recommended, have questions to see the officia
?We can print it out, like iphone6s, this value is printed out width:375,height:667, because the 6s density is 2, so we know that the width of this is DP. Fitting scheme
So, here's the adaptation scheme in Rn: Take 6,6s as an example:UI design Prototypes: Based on Iphone6Resolution: 1334 x 750 px;Screen Size: 4.7 inchesDPI:326DPI (approximately equal to 320dpi,density=2)
Import {Dimensions} from ' react-native
After 3 weeks of time, the first two weeks and the exam, using some trivial time, finally the basic interface of the app to complete the function. Let's take a picture first.
The use of react-native 0.36 version of development, is a lot of the pit, to a simple summary of it.
To tell the truth, an application of user loyalty, the UI is absolutely a big relationship, which is my imitation of the Nuggets cli
of permissions problems, please use chown fix).2. Running iOS Apps$ CD AwesomeprojectOpen ios/awesomeproject.xcodeproj with Xcode and click the Run button.Open the Index.ios.js with your favorite text editor and change to a few lines.Press "-R" in iOS emulator to refresh the app and see your latest changes!3. Running Android App$ CD Awesomeproject$ react-native
misunderstood myself. Ask for advice.
So, more often, we need to customize the buttons we need. Rather than using it with this
We can use three components to make the buttons we need. Or you can search the github.com website for ' React native button ' to see the work of other people in the community. Touchableopacity Touchablehighlight Touchablenativefeedback
There is also a touchablewithoutfeedback, the
start using it, it's quick and easy to build a UI for many different sizes of screens. I have been very enthusiastic about the Visual interface Editor in Xcode, and its automatic layout is a complex Mandarin compared to flexbox. The CSS style used by Flexbox makes reuse of styles as simple as copy-and-paste. The best thing to do is to allow you to change the value of the style to perfection in a moment.Live/hot ReloadYes, I want to see the button move right 5 pixels is as simple as command+s. T
Editor: This article is from the Ctrip framework Research and Development Department senior manager Wei Xiaojun in the second " Ctrip technology micro-sharing" on the sharing, the following is the collation of the text record. Click here for video playback . Follow Ctrip Technology Center Ctriptech to learn more about micro-sharing courses. As support for the development of native applications with JavaScript, Re
sethtml (WebView view, @Nullable String html) {LOG.E ("TAG", "sethtml");View.loaddata (HTML, "text/html; Charset=utf-8 "," UTF-8 ");}}As with native modules, native UI components also need to be registered to implement the reactpackage interface for WebView registration. Add this reactpackage to the Reactinstancemanager instance, in MainactivtyThen create a new Webview.js file on the JavaScript layer. Ente
, respectivelyand executes the source. BASHRC Make Environment variables effectiveThe environment variable is as follows, and the path is modified slightly.# Set JDK EnvironmentExport java_home=/usr/lib/jvm/jdk1.8.0_60Export JRE_HOME=${JAVA_HOME}/JREExport Classpath=.:${java_home}/lib:${jre_home}/libExport Path=${java_home}/bin: $PATH#set Android SDK Tools environmentExport android_home=/home/uxstone/android/sdk/Export path= $PATH: $ANDROID _home/platform-tools/10. Run the Andorid projectYou can
next one will read the code inside. Open the Index.ios.js file with a text editor. (1) Find the CodeText>text> part: text style={styles.welcome}> Welcome to React Native!text> modified as follows: text style={styles.welcome}> React-native Getting Started learning text> (2) Find code welcome: { Fontsize:20, textAlign:
Getting started with React Native Development and reactnative
Directory:I. Preface 2. What is React Native 3. Development Environment establishment 4. Preparation knowledge 5. Simplest React Native mini-program 6. Summary 7. Refer
IntroducedThe purpose of 1,react JS is to make the V layer of the front end more modular and better reusable, it can use simple HTML tags to create more custom component tags, internal binding events, but also let you free from the operation of the DOM, only need to manipulate the data will change the corresponding DOM.The purpose of 2,react native is that we can
"sudo" and "-g" options).Install REACT-NATIVE-CLI# no need vpnsudo NPM install-g react-native-cli Installing GenymotionFirst install VirtualBox, from Baidu Search can.The genymotion is more fluid and recommended for installation than the emulator that comes with the Androi
GitHub Address: Https://github.com/lyxia/RNWeiBo
http://www.jianshu.com/p/4190205d9811
IOS AndroidReact-native version 0.40.0MOBX, redux schema completed
1, micro-blog Home2, micro-blog Details page3, point praise4, unread message red dot5, publish the page animation6, micro-blog content of the emoji7, save token, automatically verify token, preload userinfo8, up and down pull refresh operation
1. Git clone https://github.com/lyxia/RNWeiBo2. CD R
Not long ago, Facebook officially opened the React Native project at the F8 developer Conference. But for IOS only, the Android version needs to wait a bit longer, and this is the latest attempt to develop native apps in the JavaScript language, with sample code quite concise and built-in controls. Facebook also developed an Atom-based ide--nuclide for
1. The first integrated project directory
I'm using it directly in the format of React-native Init project, which means that my Android project directory is in a directory with Node_modules.
After we init the project, the project initialization is completed, at this time we can use the command react-native run-androi
Not long ago, Facebook officially opened the React Native project at the F8 developer Conference. But for IOS only, the Android version needs to wait a bit longer, and this is the latest attempt to develop native apps in the JavaScript language, with sample code quite concise and built-in controls. Facebook also developed an Atom-based ide--nuclide for
Objective
Recently, there are new projects, so long have not written a blog, and then all use leisure time to learn react-native.
Because the employment environment of Android and iOS brings unprecedented impact to mobile development, so many partners have to find another way, and now the more popular Hybird and react-
Recommended 11 React Native Open Source Mobile UI componentsOschina posted 10 month ago, total 14 reviewsThis article recommends 11 great React Native Open source components, which hopefully will help mobile app developers.React Native is a recent Facebook
implements the Render method, which returns only The first step is complete, you see, it is so simple ~Let's start with the second step.function () { return HelloWorld;});Appregistry is a portal to applications that run react native. The root component of an application must register itself in the app by calling the Appregistry.registercomponent method so that the na
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.