Skip to content

Commit 0707517

Browse files
sunnylqmsunnylqm
committed
update
1 parent ff8eb8b commit 0707517

File tree

9 files changed

+99
-574
lines changed

9 files changed

+99
-574
lines changed

‎docs/docs/0.38/indexes.json

Lines changed: 0 additions & 507 deletions
This file was deleted.

‎docs/docs/0.39/cameraroll.md

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
`CameraRoll`模块提供了访问本地相册的功能。
1+
`CameraRoll`模块提供了访问本地相册的功能。在iOS上使用这个模块之前，你需要先链接`RCTCameraRoll`库，具体做法请参考[链接原生库](linking-libraries-ios.html)文档。
2+
3+
**译注**：本模块只提供了基本的访问图片的功能，并没有提供相册界面。对于多数开发者来说，可能[react-native-image-picker](https://github.com/marcshilling/react-native-image-picker)的功能更为完整易用。
4+
5+
### iOS 10的权限要求
6+
从iOS10开始，访问相册需要用户授权。你需要在`Info.plist`中添加一条名为`NSCameraUsageDescription`的键，然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在Xcode中实际会显示为`Privacy - Camera Usage Description`。
27

38
### 截图
49
![cameraroll](img/api/cameraroll.png)
@@ -20,6 +25,14 @@
2025
<p>返回一个Promise，操作成功时返回新的URI。</p>
2126
</div>
2227
</div>
28+
<div class="prop">
29+
<h4 class="methodTitle"><a class="anchor" name="savetocameraroll"></a><span class="methodType">static </span>saveToCameraRoll<span class="methodType">(tag, type?)</span> <a class="hash-link" href="#savetocameraroll">#</a></h4>
30+
<div><p>把图片或视频保存到相册中。</p>
31+
<p>On Android, the tag must be a local image or video URI, such as <code>"file:///sdcard/img.png"</code>.</p><p>On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time).</p>
32+
<p>If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise it will be treated as a photo. To override the automatic choice, you can pass an optional
33+
<code>type</code> parameter that must be one of 'photo' or 'video'.</p><p>Returns a Promise which will resolve with the new URI.</p>
34+
</div>
35+
</div>
2336
<div class="prop">
2437
<h4 class="propTitle"><a class="anchor" name="getphotos"></a><span class="propType">static </span>getPhotos<span class="propType">(params: object)</span> <a class="hash-link" href="#getphotos">#</a></h4>
2538
<div>
@@ -48,45 +61,43 @@ const {
4861
TouchableOpacity
4962
} = ReactNative;
5063

64+
const invariant = require('fbjs/lib/invariant');
65+
5166
const CameraRollView = require('./CameraRollView');
5267

5368
const AssetScaledImageExampleView = require('./AssetScaledImageExample');
5469

55-
const CAMERA_ROLL_VIEW = 'camera_roll_view';
56-
57-
const CameraRollExample = React.createClass({
58-
59-
getInitialState() {
60-
return {
61-
groupTypes: 'SavedPhotos',
62-
sliderValue: 1,
63-
bigImages: true,
64-
};
65-
},
66-
70+
class CameraRollExample extends React.Component {
71+
state = {
72+
groupTypes: 'SavedPhotos',
73+
sliderValue: 1,
74+
bigImages: true,
75+
};
76+
_cameraRollView: ?CameraRollView;
6777
render() {
6878
return (
6979
<View>
7080
<Switch
7181
onValueChange={this._onSwitchChange}
72-
value={this.state.bigImages} />
82+
value={this.state.bigImages}
83+
/>
7384
<Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
7485
<Slider
7586
value={this.state.sliderValue}
7687
onValueChange={this._onSliderChange}
7788
/>
7889
<Text>{'Group Type: ' + this.state.groupTypes}</Text>
7990
<CameraRollView
80-
ref={CAMERA_ROLL_VIEW}
91+
ref={(ref) => { this._cameraRollView = ref; }}
8192
batchSize={20}
8293
groupTypes={this.state.groupTypes}
8394
renderImage={this._renderImage}
8495
/>
8596
</View>
8697
);
87-
},
98+
}
8899

89-
loadAsset(asset){
100+
loadAsset = (asset) => {
90101
if (this.props.navigator) {
91102
this.props.navigator.push({
92103
title: 'Camera Roll Image',
@@ -95,13 +106,13 @@ const CameraRollExample = React.createClass({
95106
passProps: { asset: asset },
96107
});
97108
}
98-
},
109+
};
99110

100-
_renderImage(asset) {
111+
_renderImage = (asset) => {
101112
const imageSize = this.state.bigImages ? 150 : 75;
102113
const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
103-
const location = asset.node.location.longitude ?
104-
JSON.stringify(asset.node.location) : 'Unknown location';
114+
const {location} = asset.node;
115+
const locationStr = location ? JSON.stringify(location) : 'Unknown location';
105116
return (
106117
<TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
107118
<View style={styles.row}>
@@ -111,29 +122,30 @@ const CameraRollExample = React.createClass({
111122
/>
112123
<View style={styles.info}>
113124
<Text style={styles.url}>{asset.node.image.uri}</Text>
114-
<Text>{location}</Text>
125+
<Text>{locationStr}</Text>
115126
<Text>{asset.node.group_name}</Text>
116127
<Text>{new Date(asset.node.timestamp).toString()}</Text>
117128
</View>
118129
</View>
119130
</TouchableOpacity>
120131
);
121-
},
132+
};
122133

123-
_onSliderChange(value) {
134+
_onSliderChange = (value) => {
124135
const options = CameraRoll.GroupTypesOptions;
125136
const index = Math.floor(value * options.length * 0.99);
126137
const groupTypes = options[index];
127138
if (groupTypes !== this.state.groupTypes) {
128139
this.setState({groupTypes: groupTypes});
129140
}
130-
},
141+
};
131142

132-
_onSwitchChange(value) {
133-
this.refs[CAMERA_ROLL_VIEW].rendererChanged();
143+
_onSwitchChange = (value) => {
144+
invariant(this._cameraRollView, 'ref should be set');
145+
this._cameraRollView.rendererChanged();
134146
this.setState({ bigImages: value });
135-
}
136-
});
147+
};
148+
}
137149

138150
const styles = StyleSheet.create({
139151
row: {
@@ -157,7 +169,7 @@ exports.description = 'Example component that uses CameraRoll to list user\'s ph
157169
exports.examples = [
158170
{
159171
title: 'Photos',
160-
render(): ReactElement<any> { return <CameraRollExample />; }
172+
render(): React.Element<any> { return <CameraRollExample />; }
161173
}
162174
];
163175
```

‎docs/docs/0.39/image.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,11 @@ dependencies {
154154
<h6 class="propTitle"><span class="platform">android</span>overlayColor <span
155155
class="propType">ReactPropTypes.string</span>
156156
<div><p>当图片有圆角的时候，指定一个颜色用于填充圆角处的空白。虽然一般情况下圆角处是透明的，但在某些情况下，Android并不支持圆角透明，比如：
157-
- 某些resize模式比如'contain'
158-
- GIF动画</p>
157+
<ul>
158+
<li>某些resize模式比如<code>'contain'</code></li>
159+
<li>GIF动画</li>
160+
</p>
161+
</ul>
159162
<p>常见的用法就是在不能圆角透明时，设置<code>overlayColor</code>和背景色一致。</p>
160163
<p>详细说明可参考
161164
<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a>

‎docs/docs/0.39/indexes.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@
159159
"mdlink": "native-component-ios"
160160
},
161161
{
162-
"subject": "使用链接库",
162+
"subject": "链接原生库",
163163
"mdlink": "linking-libraries-ios"
164164
},
165165
{

‎docs/docs/next/cameraroll.md

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
`CameraRoll`模块提供了访问本地相册的功能。
1+
`CameraRoll`模块提供了访问本地相册的功能。在iOS上使用这个模块之前，你需要先链接`RCTCameraRoll`库，具体做法请参考[链接原生库](linking-libraries-ios.html)文档。
2+
3+
**译注**：本模块只提供了基本的访问图片的功能，并没有提供相册界面。对于多数开发者来说，可能[react-native-image-picker](https://github.com/marcshilling/react-native-image-picker)的功能更为完整易用。
4+
5+
### iOS 10的权限要求
6+
从iOS10开始，访问相册需要用户授权。你需要在`Info.plist`中添加一条名为`NSCameraUsageDescription`的键，然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在Xcode中实际会显示为`Privacy - Camera Usage Description`。
27

38
### 截图
49
![cameraroll](img/api/cameraroll.png)
@@ -20,6 +25,14 @@
2025
<p>返回一个Promise，操作成功时返回新的URI。</p>
2126
</div>
2227
</div>
28+
<div class="prop">
29+
<h4 class="methodTitle"><a class="anchor" name="savetocameraroll"></a><span class="methodType">static </span>saveToCameraRoll<span class="methodType">(tag, type?)</span> <a class="hash-link" href="#savetocameraroll">#</a></h4>
30+
<div><p>把图片或视频保存到相册中。</p>
31+
<p>On Android, the tag must be a local image or video URI, such as <code>"file:///sdcard/img.png"</code>.</p><p>On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time).</p>
32+
<p>If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise it will be treated as a photo. To override the automatic choice, you can pass an optional
33+
<code>type</code> parameter that must be one of 'photo' or 'video'.</p><p>Returns a Promise which will resolve with the new URI.</p>
34+
</div>
35+
</div>
2336
<div class="prop">
2437
<h4 class="propTitle"><a class="anchor" name="getphotos"></a><span class="propType">static </span>getPhotos<span class="propType">(params: object)</span> <a class="hash-link" href="#getphotos">#</a></h4>
2538
<div>
@@ -48,45 +61,43 @@ const {
4861
TouchableOpacity
4962
} = ReactNative;
5063

64+
const invariant = require('fbjs/lib/invariant');
65+
5166
const CameraRollView = require('./CameraRollView');
5267

5368
const AssetScaledImageExampleView = require('./AssetScaledImageExample');
5469

55-
const CAMERA_ROLL_VIEW = 'camera_roll_view';
56-
57-
const CameraRollExample = React.createClass({
58-
59-
getInitialState() {
60-
return {
61-
groupTypes: 'SavedPhotos',
62-
sliderValue: 1,
63-
bigImages: true,
64-
};
65-
},
66-
70+
class CameraRollExample extends React.Component {
71+
state = {
72+
groupTypes: 'SavedPhotos',
73+
sliderValue: 1,
74+
bigImages: true,
75+
};
76+
_cameraRollView: ?CameraRollView;
6777
render() {
6878
return (
6979
<View>
7080
<Switch
7181
onValueChange={this._onSwitchChange}
72-
value={this.state.bigImages} />
82+
value={this.state.bigImages}
83+
/>
7384
<Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
7485
<Slider
7586
value={this.state.sliderValue}
7687
onValueChange={this._onSliderChange}
7788
/>
7889
<Text>{'Group Type: ' + this.state.groupTypes}</Text>
7990
<CameraRollView
80-
ref={CAMERA_ROLL_VIEW}
91+
ref={(ref) => { this._cameraRollView = ref; }}
8192
batchSize={20}
8293
groupTypes={this.state.groupTypes}
8394
renderImage={this._renderImage}
8495
/>
8596
</View>
8697
);
87-
},
98+
}
8899

89-
loadAsset(asset){
100+
loadAsset = (asset) => {
90101
if (this.props.navigator) {
91102
this.props.navigator.push({
92103
title: 'Camera Roll Image',
@@ -95,13 +106,13 @@ const CameraRollExample = React.createClass({
95106
passProps: { asset: asset },
96107
});
97108
}
98-
},
109+
};
99110

100-
_renderImage(asset) {
111+
_renderImage = (asset) => {
101112
const imageSize = this.state.bigImages ? 150 : 75;
102113
const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
103-
const location = asset.node.location.longitude ?
104-
JSON.stringify(asset.node.location) : 'Unknown location';
114+
const {location} = asset.node;
115+
const locationStr = location ? JSON.stringify(location) : 'Unknown location';
105116
return (
106117
<TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
107118
<View style={styles.row}>
@@ -111,29 +122,30 @@ const CameraRollExample = React.createClass({
111122
/>
112123
<View style={styles.info}>
113124
<Text style={styles.url}>{asset.node.image.uri}</Text>
114-
<Text>{location}</Text>
125+
<Text>{locationStr}</Text>
115126
<Text>{asset.node.group_name}</Text>
116127
<Text>{new Date(asset.node.timestamp).toString()}</Text>
117128
</View>
118129
</View>
119130
</TouchableOpacity>
120131
);
121-
},
132+
};
122133

123-
_onSliderChange(value) {
134+
_onSliderChange = (value) => {
124135
const options = CameraRoll.GroupTypesOptions;
125136
const index = Math.floor(value * options.length * 0.99);
126137
const groupTypes = options[index];
127138
if (groupTypes !== this.state.groupTypes) {
128139
this.setState({groupTypes: groupTypes});
129140
}
130-
},
141+
};
131142

132-
_onSwitchChange(value) {
133-
this.refs[CAMERA_ROLL_VIEW].rendererChanged();
143+
_onSwitchChange = (value) => {
144+
invariant(this._cameraRollView, 'ref should be set');
145+
this._cameraRollView.rendererChanged();
134146
this.setState({ bigImages: value });
135-
}
136-
});
147+
};
148+
}
137149

138150
const styles = StyleSheet.create({
139151
row: {
@@ -157,7 +169,7 @@ exports.description = 'Example component that uses CameraRoll to list user\'s ph
157169
exports.examples = [
158170
{
159171
title: 'Photos',
160-
render(): ReactElement<any> { return <CameraRollExample />; }
172+
render(): React.Element<any> { return <CameraRollExample />; }
161173
}
162174
];
163175
```

‎docs/docs/next/image.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,8 +154,11 @@ dependencies {
154154
<h6 class="propTitle"><span class="platform">android</span>overlayColor <span
155155
class="propType">ReactPropTypes.string</span>
156156
<div><p>当图片有圆角的时候，指定一个颜色用于填充圆角处的空白。虽然一般情况下圆角处是透明的，但在某些情况下，Android并不支持圆角透明，比如：
157-
- 某些resize模式比如'contain'
158-
- GIF动画</p>
157+
<ul>
158+
<li>某些resize模式比如<code>'contain'</code></li>
159+
<li>GIF动画</li>
160+
</p>
161+
</ul>
159162
<p>常见的用法就是在不能圆角透明时，设置<code>overlayColor</code>和背景色一致。</p>
160163
<p>详细说明可参考
161164
<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a>

‎docs/docs/next/indexes.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@
159159
"mdlink": "native-component-ios"
160160
},
161161
{
162-
"subject": "使用链接库",
162+
"subject": "链接原生库",
163163
"mdlink": "linking-libraries-ios"
164164
},
165165
{

‎docs/docs/next/integration-with-existing-apps.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
346346
347347
## The Magic: `RCTRootView`
348348

349-
Now that your React Native component is created via `index.ios.js`, you need to add that component to a new or existing `ViewController`. The easiest path to take is to optionally create an event path to your component and then add that component to an existing `ViewController`.
349+
现在我们已经在`index.ios.js`中创建了React Native组件，下一步就是把这个组件添加给一个新的或已有的`ViewController`。 The easiest path to take is to optionally create an event path to your component and then add that component to an existing `ViewController`.
350350

351351
We will tie our React Native component with a new native view in the `ViewController` that will actually host it called `RCTRootView` .
352352

‎docs/docs/next/native-modules-android.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,8 @@ __译注__：这一部分涉及到较新的js语法和特性，不熟悉的读
206206
我们把上面的代码用promise来代替回调进行重构：
207207

208208
```java
209+
import com.facebook.react.bridge.Promise;
210+
209211
public class UIManagerModule extends ReactContextBaseJavaModule {
210212

211213
...

0 commit comments

Comments
 (0)