環境配置

1. node版本 6.11.3
2. npm install -g react-native-cli //具體參考RN官網
3. react-native run-ios //運行項目

主要使用的技術

react native

1. ListView
2. View
3. Text
4. TouchableHighlight

react

1. PropTypes
2. Component

輔助工具

1. underscore

布局

                                       │                                                   │          
                                       │              ┌─────────────────┐                  │          
                                       │              │   watch face    │                  │          
                                       │              └─────────────────┘                  │          
                                       │                                                   │          
                                       │                                                   │          
                                       ├───────────────────────────────────────────────────┤          
                                       │                                                   │          
                                       │                                                   │          
                                       │            ┌──────────────────────┐               │          
                                       │            │                      │               │          
                                       │            │  watch face control  │               │          
                                       │            │                      │               │          
                                       │            └──────────────────────┘               │          
                                       │                                                   │          
                                       │                                                   │          
                                       ├───────────────────────────────────────────────────┤          
                                       │                                                   │          
                                       │                                                   │          
                                       │                                                   │         *
                                       │                                                   │          
                                       │                                                   │          
                                       │             ┌─────────────────────────┐           │          
                                       │             │                         │           │          
                                       │             │      watch record       │           │          
                                       │             │                         │           │          
                                       │             └─────────────────────────┘           │          
                                       │                                                   │          
                                       │                                                   │          
                                       │                                                   │          
                                       │                                                   │          
                                       └───────────────────────────────────────────────────┘          

完整代碼地址

1. git clone https://github.com/zhangyifei000/Rn-WatchFace watch-face
2. cd watch-face
3. cd watchface
4. npm install //node -v 0.6.13 不知道其他版本是否有問題
5. react-native run-ios //要安裝有xcode

直接用xcode運行

1 . npm install

2.進入 ios目錄 用xcode打開

演示