Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tips / React Native

React Native

Jest https://zonble.gitbooks.io/kkbox-ios-dev/delegate/other_platforms.html “Build an AudioBook app in React Native using Styled Components” by Ebuka Umeh https://link.medium.com/OiuOBUfR9X

Since react-native 0.25.0, React should be required from node_modules. React Native versions from 0.18 should be working out of the box, for lower versions you should add react as a dependency in your package.json.

Codegen: 2018 公告新架構

create-react-native-app should be create-expo-app Donut Chart with D3 Art setup-your-first React Native App Make realtime SoundCloud Waveforms firebase-github-authentication-with-react-native Building with Complex Navigation using react-navigation

developing-mobile-apps-with-react-native-in-webstormEpic Development Environment using Windows Subsystem for Linux Release APK on WSL: upgrade gradle running-react-native-in-wsl-with-the-emulator-running-directly-in-windows Setup React Native on Ubuntu 18.04 React Native on Ubuntu 17.10  VM Acceleration say-hello-world-using-react-native-in-linux building-react-native-projects-with-native-code #3 Building iOS App

modal 不能直接設定 style 屬性值

Dev Environment

8G RAM Chocolatey 在 Win10 會有問題

WSL + VS Code scaleable settings solidarity best practives: #1

nvm

$ yarn install create-react-native-app
$ create-react-native-app MyRN

flatlist + realtime searching

Launch Icon Static Resources Production Level App Touch ID + Face ID

iOS Link Library 分 Automatic 和 Manual 兩種,前者先用 npm install 再用 react-native link 如果專案使用 CocoaPods 就要先 podspec 檔再 react-native link,後者先找到 .xcodeproj 檔放進 Libraries,再 Build Phases 和 Link Binary With Libraries。

react-native-fbsdk Mobile apps that use Facebook's iOS and Android SDKs get long-lived tokens by default. _fbAuth this.setState is not a function Firebase Login Data callBackManager iOS 11.3.1 LoginManager.logOut() LoginManager.logInWithReadPermission() Libraries Settings with Travis MediaPlayer 阿里百川用戶反饋 Play Sound

react-native-sentry react-native-maps Map PROVIDER_GOOGLE react-native-sqlite-demo react-native-progress Instagram Clone

Setting Up ESLint and EditorConfig in React Native Projects

https://stackoverflow.com/questions/41850390/change-the-fb-login-button-text-react-native-fbsdk

Layout

example tutorial

Open Link URL

ScrollView + FaltList + onEndReached 觸底載入更多資料

Better Modals in React Native Horizontal Rule 橫線

Storage

AsyncStorage should be used instead of LocalStorage. It is recommended that using an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally. 底層實作再分 iOS Android 有不同對應方式 onPress=(this.saveData)

Bridge Native Modules and Web

UI Components Tutorial another

Sending Events to JavaScript from Native Modules

Connecting React Native and Meteor 90 Code Reuse in Production with React Native for Web: DataCamp

Testing

 Example

Jest + Enzyme

describe('Testing ReassignLocationMenu component', () => {
  it('renders as expected', () => {
    const wrapper = shallow(
      
    );
    expect(wrapper).toMatchSnapshot();
    wrapper.setProps({ count: 1});
    expect(wrapper).toMatchSnapshot();
  });
});

Can't run Jest on Travis since Upgrading to babel-7 introducing aloestackview for iOS

Swift vs React-Native: 一般程式的效能差異不大,但地圖應用場合 React Native 勝出。

Unifying Mobile and Web Development with React Native

90% Code Reuse In Production with React Native For Web  支援 V8 engine 主要動機是因為 JavaScriptCore 在 Android 上實在蠻多問題的,而且 WebKit 主力維護者 Apple 又不管 Android 所以除了之前那 RN 0.59 在 Samsung S7 上面的 crash 以外,其實還有一些功能是 iOS 有,但 Android 不會有的 其他進階的,像是我想實驗 V8 的 snapshot 功能,把 RN index.bundle.js 直接編成 native code,再配合關掉 JIT,或許有機會達到記憶體用量小、速度快 姑且就叫他 AOT 吧 XD 以前 Bridge 是把 JS <-> Native 的 function call 建成一張 JSON table,call function 的時候就去查表 + dispatch JSI 是用 JS engine 本身對於 C/C++ 的互動能力,就不沒有這個 Bridge 的必要了