Skip to content

Commit

Permalink
react-native demo
Browse files Browse the repository at this point in the history
  • Loading branch information
dunizb committed Sep 29, 2016
1 parent 28693e2 commit 19f2e7b
Show file tree
Hide file tree
Showing 87 changed files with 5,177 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,6 @@
.idea/workspace.xml
React/node_modules/
.idea/workspace.xml
/react-native/dunizb/node_modules/
/react-native/myApp/node_modules/
/react-native/nativeApp/node_modules/
115 changes: 115 additions & 0 deletions react-native/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
# ReactNative

## ReactNative
>> React Native For Android是伟大的互联网公司Facebook与2015年9月15日发布的,该可以让我们广大开发者使用JavaScript和React开发我们 的应用,该提倡组件化开发,也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用,甚至我们可以相关嵌套形成新的组件。使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。现阶段Web APP的的体验还是无法达到Native APP的体验,所以这边fackbook更加强调的是learn once,write everywhere,应用前端我们使用js和React来开发不同平台的UI,下层核心模块编写复用的业务逻辑代码,提供应用开发效率。
### 项目结构介绍

### ReactNative初步使用
- 不有div,也没有html的一些其他标签.
- 我们在这里写的组件,最终不是在浏览器中执行,是被转换成相应平台的语言。

- div+css img

### Text组件
- 用来显示文字的,所以的文字都必写在该组件中显示
- numberOfLines
- var str = '小明' ; str = 12131;

### View组件
- 这个就相当于html中的div,可以用来进行基本布局。
- 不能够通过View设置字体颜色,需要直接给Text组件设置颜色


### 与ReactJS中组件对比


### 样式操作

### Image组件
- <Image source={require('...jpg')} />
- 如果改变了请求的本地图片(如果图片文件是在项目新加的),需要重新执行`react-native run-android`,执行之前,那个弹出的命令行窗口也需要关闭。
- 如果使用的是网络图片不需要重新编译。

- 图片组件的其他使用情况
+ testa.android.png // testa.ios.png
* 我是在Image组件直接使用testa.png就可以了,reactNative会自动根据不同的平台去显示不同的图片

+ [email protected] // [email protected]
* 能够根据不同的分辨率显示不同的图片.,我们使用时也只需要写 testa.png

- 图片组件还可以当作背景图使用
+ 需要使用双标签的形式,内容就写在标签中间。


***********
- 其实到这里已经可以编写各种各样的组件了

### TextInput 组件
- onChangeText
+ 文本改变事件

### ListView
- 属性: dataSource
+ 指定一个数据源这个数据是通过
new ListView.DataSource(
rowHasChanged:(r1,r2)=>r1!==r2).cloneWithRows(['小明',小月])
- 属性: renderRow,指定我们ListView中每一行所显示的内容,只要保证它最终返回的是一个组件对象。


### ScrollView 组件




### 校验服务是否停止
http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false



### 手势响应系统
- onPress // 手指点击
- onLongPress // 长按
- onPressIn // 按下
- onPressOut // 离开

#### TouchableHightLight
- 用于注册触摸事件,想要注册事件的组件都用该组件包裹

#### TouchableNativeFeedback
- 该组件注册事件会有涟漪效果
- 不能够直接包裹一个Text组件
- 必需将内部的元素用一个View包裹

#### TouchabelWithoutFeedback
- 点击之后没有任何效果(js代码还是会执行)
- 不能够直接包裹一个Text组件

#### TouchableOpacity
- 点击之后会有一个透明效果


### 扩展
- netstat -aon|findstr "端口号" //查看占用端口的程序
- tasklist|findstr "PID" // 查看PID对应的程序进程名


## https,http
这种写法可以允https形式的网站请求http的资源
<img src="//www.baidu.com/aa.jpg />

md5,sha1,sh

restfull
get // 拿数据
post // 添加数据


// 电影数据
var MOCKED_MOVIES_DATA = [
{title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];



var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
6 changes: 6 additions & 0 deletions react-native/dunizb/.buckconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

[android]
target = Google Inc.:Google APIs:23

[maven_repositories]
central = https://repo1.maven.org/maven2
58 changes: 58 additions & 0 deletions react-native/dunizb/.flowconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
[ignore]

# We fork some components by platform.
.*/*[.]android.js

# Ignore templates with `@flow` in header
.*/local-cli/generator.*

# Ignore malformed json
.*/node_modules/y18n/test/.*\.json

# Ignore the website subdir
<PROJECT_ROOT>/website/.*

# Ignore BUCK generated dirs
<PROJECT_ROOT>/\.buckd/

# Ignore unexpected extra @providesModule
.*/node_modules/commoner/test/source/widget/share.js

# Ignore duplicate module providers
# For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root
.*/Libraries/react-native/React.js
.*/Libraries/react-native/ReactNative.js
.*/node_modules/jest-runtime/build/__tests__/.*

[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow
flow/

[options]
module.system=haste

esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable

experimental.strict_type_args=true

munge_underscores=true

module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-2]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-2]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy

unsafe.enable_getters_and_setters=true

[version]
^0.32.0
41 changes: 41 additions & 0 deletions react-native/dunizb/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# OSX
#
.DS_Store

# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace

# Android/IJ
#
*.iml
.idea
.gradle
local.properties

# node.js
#
node_modules/
npm-debug.log

# BUCK
buck-out/
\.buckd/
android/app/libs
android/keystores/debug.keystore
1 change: 1 addition & 0 deletions react-native/dunizb/.watchmanconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
66 changes: 66 additions & 0 deletions react-native/dunizb/android/app/BUCK
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import re

# To learn about Buck see [Docs](https://buckbuild.com/).
# To run your application with Buck:
# - install Buck
# - `npm start` - to start the packager
# - `cd android`
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
# - `buck install -r android/app` - compile, install and run application
#

lib_deps = []
for jarfile in glob(['libs/*.jar']):
name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
lib_deps.append(':' + name)
prebuilt_jar(
name = name,
binary_jar = jarfile,
)

for aarfile in glob(['libs/*.aar']):
name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
lib_deps.append(':' + name)
android_prebuilt_aar(
name = name,
aar = aarfile,
)

android_library(
name = 'all-libs',
exported_deps = lib_deps
)

android_library(
name = 'app-code',
srcs = glob([
'src/main/java/**/*.java',
]),
deps = [
':all-libs',
':build_config',
':res',
],
)

android_build_config(
name = 'build_config',
package = 'com.dunizb',
)

android_resource(
name = 'res',
res = 'src/main/res',
package = 'com.dunizb',
)

android_binary(
name = 'app',
package_type = 'debug',
manifest = 'src/main/AndroidManifest.xml',
keystore = '//android/keystores:debug',
deps = [
':app-code',
],
)
Loading

0 comments on commit 19f2e7b

Please sign in to comment.