kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-27 19:25:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace deprecated ActivityIndicatorIOS and ProgressBar with ActivityIndicator

Browse Source 
Summary:
This replaces ActivityIndicatorIOS and indeterminate ProgressBar that were deprecated recently with ActivityIndicator across the codebase and examples and a few other cleanups.

This also make a small tweak to ActivityIndicator so it uses the Android theme color instead of gray when no color is specified.

Use Slider instead of SliderIOS in CameraRoll example.

Remove the line about unifying ActivityIndicator and ProgressBar.

**Test plan**
Tested the affected components in UIExplorer on iOS and Android, tested the changes made in Movies example on iOS and Android.
Closes https://github.com/facebook/react-native/pull/8082

Differential Revision: D3429770

fbshipit-source-id: 3b2e1196a8b9fe00d47a7aa1bbc079b094796421
This commit is contained in:
Janic Duplessis
2016-06-13 22:15:47 -07:00
committed by Facebook Github Bot 9
parent d344963123
commit 4c245160bd
11 changed files with 26 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Examples/Movies/SearchBar.android.js
View File

@@ -21,7 +21,7 @@ var ReactNative = require('react-native');
var {
Image,
Platform,
ProgressBarAndroid,
ActivityIndicator,
TextInput,
StyleSheet,
TouchableNativeFeedback,
@@ -32,17 +32,6 @@ var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;
var SearchBar = React.createClass({
render: function() {
var loadingView;
if (this.props.isLoading) {
loadingView = (
<ProgressBarAndroid
styleAttr="Large"
style={styles.spinner}
/>
);
} else {
loadingView = <View style={styles.spinner} />;
}
var background = IS_RIPPLE_EFFECT_SUPPORTED ?
TouchableNativeFeedback.SelectableBackgroundBorderless() :
TouchableNativeFeedback.SelectableBackground();
@@ -69,7 +58,12 @@ var SearchBar = React.createClass({
onFocus={this.props.onFocus}
style={styles.searchBarInput}
/>
{loadingView}
<ActivityIndicator
animating={this.props.isLoading}
color="white"
size="large"
style={styles.spinner}
/>
</View>
);
}
@@ -94,6 +88,7 @@ var styles = StyleSheet.create({
spinner: {
width: 30,
height: 30,
marginRight: 16,
},
icon: {
width: 24,

4
Examples/Movies/SearchBar.ios.js
View File

@@ -19,7 +19,7 @@
var React = require('react');
var ReactNative = require('react-native');
var {
ActivityIndicatorIOS,
ActivityIndicator,
TextInput,
StyleSheet,
View,
@@ -37,7 +37,7 @@ var SearchBar = React.createClass({
onFocus={this.props.onFocus}
style={styles.searchBarInput}
/>
<ActivityIndicatorIOS
<ActivityIndicator
animating={this.props.isLoading}
style={styles.spinner}
/>

14
Examples/Movies/SearchScreen.js
View File

@@ -18,10 +18,9 @@
var React = require('react');
var ReactNative = require('react-native');
var {
ActivityIndicatorIOS,
ActivityIndicator,
ListView,
Platform,
ProgressBarAndroid,
StyleSheet,
Text,
View,
@@ -250,15 +249,8 @@ var SearchScreen = React.createClass({
if (!this.hasMore() || !this.state.isLoadingTail) {
return <View style={styles.scrollSpinner} />;
}
if (Platform.OS === 'ios') {
return <ActivityIndicatorIOS style={styles.scrollSpinner} />;
} else {
return (
<View style={{alignItems: 'center'}}>
<ProgressBarAndroid styleAttr="Large"/>
</View>
);
}
return <ActivityIndicator style={styles.scrollSpinner} />;
},
renderSeparator: function(

4
Examples/UIExplorer/CameraRollExample.js
View File

@@ -20,7 +20,7 @@ const ReactNative = require('react-native');
const {
CameraRoll,
Image,
SliderIOS,
Slider,
StyleSheet,
Switch,
Text,
@@ -51,7 +51,7 @@ const CameraRollExample = React.createClass({
onValueChange={this._onSwitchChange}
value={this.state.bigImages} />
<Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
<SliderIOS
<Slider
value={this.state.sliderValue}
onValueChange={this._onSliderChange}
/>

6
Examples/UIExplorer/CameraRollView.js
View File

@@ -19,7 +19,7 @@
var React = require('react');
var ReactNative = require('react-native');
var {
ActivityIndicatorIOS,
ActivityIndicator,
CameraRoll,
Image,
ListView,
@@ -141,7 +141,7 @@ var CameraRollView = React.createClass({
groupTypes: this.props.groupTypes,
assetType: this.props.assetType,
};
if (Platform.OS === "android") {
if (Platform.OS === 'android') {
// not supported in android
delete fetchParams.groupTypes;
}
@@ -191,7 +191,7 @@ var CameraRollView = React.createClass({
_renderFooterSpinner: function() {
if (!this.state.noMore) {
return <ActivityIndicatorIOS style={styles.spinner} />;
return <ActivityIndicator style={styles.spinner} />;
}
return null;
},

4
Examples/UIExplorer/ImageExample.js
View File

@@ -25,12 +25,12 @@
var React = require('react');
var ReactNative = require('react-native');
var {
ActivityIndicator,
Image,
Platform,
StyleSheet,
Text,
View,
ActivityIndicatorIOS
} = ReactNative;
var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
@@ -108,7 +108,7 @@ var NetworkImageExample = React.createClass({
var loader = this.state.loading ?
<View style={styles.progress}>
<Text>{this.state.progress}%</Text>
<ActivityIndicatorIOS style={{marginLeft:5}}/>
<ActivityIndicator style={{marginLeft:5}} />
</View> : null;
return this.state.error ?
<Text>{this.state.error}</Text> :

1
Examples/UIExplorer/UIExplorerExampleList.js
View File

@@ -80,6 +80,7 @@ class UIExplorerExampleList extends React.Component {
dataSource={dataSource}
renderRow={this._renderExampleRow.bind(this)}
renderSectionHeader={this._renderSectionHeader}
enableEmptySections={true}
keyboardShouldPersistTaps={true}
automaticallyAdjustContentInsets={false}
keyboardDismissMode="on-drag"

2
Libraries/Components/ActivityIndicator/ActivityIndicator.js
View File

@@ -58,7 +58,7 @@ const ActivityIndicator = React.createClass({
getDefaultProps() {
return {
animating: true,
color: GRAY,
color: Platform.OS === 'ios' ? GRAY : undefined,
hidesWhenStopped: true,
size: 'small',
};

5
Libraries/Components/WebView/WebView.android.js
View File

@@ -11,7 +11,7 @@
'use strict';
var EdgeInsetsPropType = require('EdgeInsetsPropType');
var ProgressBarAndroid = require('ProgressBarAndroid');
var ActivityIndicator = require('ActivityIndicator');
var React = require('React');
var ReactNative = require('ReactNative');
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
@@ -37,9 +37,8 @@ var WebViewState = keyMirror({
var defaultRenderLoading = () => (
<View style={styles.loadingView}>
<ProgressBarAndroid
<ActivityIndicator
style={styles.loadingProgressBar}
styleAttr="Inverse"
/>
</View>
);

4
Libraries/Components/WebView/WebView.ios.js
View File

@@ -11,7 +11,7 @@
*/
'use strict';
var ActivityIndicatorIOS = require('ActivityIndicatorIOS');
var ActivityIndicator = require('ActivityIndicator');
var EdgeInsetsPropType = require('EdgeInsetsPropType');
var React = require('React');
var ReactNative = require('ReactNative');
@@ -61,7 +61,7 @@ type Event = Object;
var defaultRenderLoading = () => (
<View style={styles.loadingView}>
<ActivityIndicatorIOS />
<ActivityIndicator />
</View>
);
var defaultRenderError = (errorDomain, errorCode, errorDesc) => (

1
docs/KnownIssues.md
View File

@@ -34,7 +34,6 @@ There are properties that work on one platform only, either because they can inh
There are known cases where the APIs could be made more consistent across iOS and Android:
- `<ViewPagerAndroid>` and `<ScrollView pagingEnabled={true}>` on iOS do a similar thing. We might want to unify them to `<ViewPager>`.
- `ActivityIndicator` could render a native spinning indicator on both platforms (currently this is done using `ActivityIndicatorIOS` on iOS and `ProgressBarAndroid` on Android).
- `ProgressBar` could render a horizontal progress bar on both platforms (on iOS this is `ProgressViewIOS`, on Android it's `ProgressBarAndroid`).
### The `overflow` style property defaults to `hidden` and cannot be changed on Android