• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

xinthink/react-native-material-kit: Bringing Material Design to React Native

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

xinthink/react-native-material-kit

开源软件地址(OpenSource Url):

https://github.com/xinthink/react-native-material-kit

开源编程语言(OpenSource Language):

TypeScript 76.4%

开源软件介绍(OpenSource Introduction):

Build Status npm react-native MIT Built with JetBrains IDEs

A set of UI components, in the purpose of introducing Material Design to apps built with React Native, quickly and painlessly.

Getting Started

First, cd to your RN project directory, and install RNMK through rnpm . If you don't have rnpm, you can install RNMK from npm with the command npm i -S react-native-material-kit and link it manually (see below).

NOTICE:

react-native-material-kit >= 0.4.0 only supports react-native >= 0.40.0

react-native-material-kit < 0.4.0 only supports react-native < 0.40.0

iOS

  • React Native < 0.29 (Using rnpm)

    rnpm install react-native-material-kit

  • React Native >= 0.29

    npm install -S react-native-material-kit

    react-native link react-native-material-kit

Manually

  1. Add node_modules/react-native-material-kit/iOS/RCTMaterialKit.xcodeproj to your xcode project, usually under the Libraries group
  2. Add libRCTMaterialKit.a (from Products under RCTMaterialKit.xcodeproj) to build target's Linked Frameworks and Libraries list

Option: Using CocoaPods

Assuming you have CocoaPods installed, create a PodFile like this in your app's project directory. You can leave out the modules you don't need.

xcodeproj 'path/to/YourProject.xcodeproj/'

pod 'React', :subspecs => ['Core', 'RCTText', 'RCTWebSocket'], :path => 'node_modules/react-native'
pod 'react-native-material-kit', :path => 'node_modules/react-native-material-kit'

post_install do |installer|
  target = installer.pods_project.targets.select{|t| 'React' == t.name}.first
  phase = target.new_shell_script_build_phase('Run Script')
  phase.shell_script = "if nc -w 5 -z localhost 8081 ; then\n  if ! curl -s \"http://localhost:8081/status\" | grep -q \"packager-status:running\" ; then\n    echo \"Port 8081 already in use, packager is either not running or not running correctly\"\n    exit 2\n  fi\nelse\n  open $SRCROOT/../node_modules/react-native/packager/launchPackager.command || echo \"Can't start packager automatically\"\nfi"
end

Now run pod install. This will create an Xcode workspace containing all necessary native files, including react-native-material-kit. From now on open YourProject.xcworkspace instead of YourProject.xcodeproject in Xcode. Because React Native's iOS code is now pulled in via CocoaPods, you also need to remove the React, RCTImage, etc. subprojects from your app's Xcode project, in case they were added previously.

Android

  • React Native < 0.29 (Using rnpm)

    rnpm install react-native-material-kit

  • React Native >= 0.29

    npm install -S react-native-material-kit

    react-native link react-native-material-kit

Manually

  1. JDK 7+ is required
  2. Add the following snippet to your android/settings.gradle:
include ':RNMaterialKit'
project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')
  1. Declare the dependency in your android/app/build.gradle
dependencies {
    ...
    compile project(':RNMaterialKit')
}
  1. Import com.github.xinthink.rnmk.ReactMaterialKitPackage and register it in your MainActivity (or equivalent, RN >= 0.32 MainApplication.java):
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new ReactMaterialKitPackage()
    );
}

Manual Installation Issues

If you experience any trouble manually installing react-native-material-kit on Android, you should be able to safely skip it.

Finally, you're good to go, feel free to require react-native-material-kit in your JS files.

Have fun!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap