mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-03-26 07:04:05 +08:00
Updates from Thu Mar 12
- Fixed sticky section headers in ListView | Nick Lockwood - [ReactNative] AppState cleanup, remove Subscribable, add in OSS examples | Eric Vicenti - [react-packager] package.json cleanup (seperate packager into it's own package) | Amjad Masad - [ReactNative] Move PushNotificationIOS to oss | Tadeu Zagallo - [ReactNative] Fix shake gesture after RedBox is dismissed | Alex Kotliarskyi - [catlyst|madman] fix prop type warning | Jiajie Zhu - [ReactNative] Remove Subscribable from TextInput | Eric Vicenti - Unforked ExceptionsManager, AlertManager and AppState | Nick Lockwood - [ReactNative|MAdMan] Notification Subscribable | Eric Vicenti - [ReactNative] OSS AsyncStorage with example | Spencer Ahrens
This commit is contained in:
Christopher Chedeau
@@ -20,7 +20,7 @@
|
||||
//
|
||||
// To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
|
||||
// iOS device are on the same Wi-Fi network.
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/2048/Game2048.includeRequire.runModule.bundle?dev=true"];
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/2048/Game2048.includeRequire.runModule.bundle"];
|
||||
|
||||
// OPTION 2
|
||||
// Load from pre-bundled file on disk. To re-generate the static bundle, run
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
//
|
||||
// To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
|
||||
// iOS device are on the same Wi-Fi network.
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle?dev=true"];
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle"];
|
||||
|
||||
// OPTION 2
|
||||
// Load from pre-bundled file on disk. To re-generate the static bundle, run
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
//
|
||||
// To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
|
||||
// iOS device are on the same Wi-Fi network.
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/TicTacToe/TicTacToeApp.includeRequire.runModule.bundle?dev=true"];
|
||||
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/TicTacToe/TicTacToeApp.includeRequire.runModule.bundle"];
|
||||
|
||||
// OPTION 2
|
||||
// Load from pre-bundled file on disk. To re-generate the static bundle, run
|
||||
|
||||
60
Examples/UIExplorer/AppStateExample.js
Normal file
60
Examples/UIExplorer/AppStateExample.js
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* Copyright 2004-present Facebook. All Rights Reserved.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
AppState,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var Button = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<TouchableHighlight
|
||||
underlayColor={'white'}
|
||||
style={styles.button}
|
||||
onPress={this.props.onPress}>
|
||||
<Text style={styles.buttonLabel}>
|
||||
{this.props.label}
|
||||
</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
button: {
|
||||
padding: 10,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
buttonLabel: {
|
||||
color: 'blue',
|
||||
},
|
||||
});
|
||||
|
||||
exports.title = 'AppState';
|
||||
exports.description = 'App background status and badge value';
|
||||
exports.examples = [
|
||||
{
|
||||
title: 'Set Badge Number',
|
||||
render: function() {
|
||||
return (
|
||||
<View>
|
||||
<Button
|
||||
onPress={() => AppState.setApplicationIconBadgeNumber(42)}
|
||||
label="Set app's icon badge to 42"
|
||||
/>
|
||||
<Button
|
||||
onPress={() => AppState.setApplicationIconBadgeNumber(0)}
|
||||
label="Clear app's icon badge"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
}];
|
||||
69
Examples/UIExplorer/AppStateIOSExample.js
Normal file
69
Examples/UIExplorer/AppStateIOSExample.js
Normal file
@@ -0,0 +1,69 @@
|
||||
/**
|
||||
* Copyright 2004-present Facebook. All Rights Reserved.
|
||||
*
|
||||
* @providesModule AppStateIOSExample
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
AppStateIOS,
|
||||
Text,
|
||||
View
|
||||
} = React;
|
||||
|
||||
var AppStateSubscription = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
appState: AppStateIOS.currentState,
|
||||
previousAppStates: [],
|
||||
};
|
||||
},
|
||||
componentDidMount: function() {
|
||||
AppStateIOS.addEventListener('change', this._handleAppStateChange);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
AppStateIOS.removeEventListener('change', this._handleAppStateChange);
|
||||
},
|
||||
_handleAppStateChange: function(appState) {
|
||||
var previousAppStates = this.state.previousAppStates.slice();
|
||||
previousAppStates.push(this.state.appState);
|
||||
this.setState({
|
||||
appState,
|
||||
previousAppStates,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
if (this.props.showCurrentOnly) {
|
||||
return (
|
||||
<View>
|
||||
<Text>{this.state.appState}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
<Text>{JSON.stringify(this.state.previousAppStates)}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
exports.title = 'AppStateIOS';
|
||||
exports.description = 'iOS app background status';
|
||||
exports.examples = [
|
||||
{
|
||||
title: 'AppStateIOS.currentState',
|
||||
description: 'Can be null on app initialization',
|
||||
render() { return <Text>{AppStateIOS.currentState}</Text>; }
|
||||
},
|
||||
{
|
||||
title: 'Subscribed AppStateIOS:',
|
||||
description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
|
||||
render() { return <AppStateSubscription showCurrentOnly={true} />; }
|
||||
},
|
||||
{
|
||||
title: 'Previous states:',
|
||||
render() { return <AppStateSubscription showCurrentOnly={false} />; }
|
||||
},
|
||||
];
|
||||
103
Examples/UIExplorer/AsyncStorageExample.js
Normal file
103
Examples/UIExplorer/AsyncStorageExample.js
Normal file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* Copyright 2004-present Facebook. All Rights Reserved.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
AsyncStorage,
|
||||
PickerIOS,
|
||||
Text,
|
||||
View
|
||||
} = React;
|
||||
var PickerItemIOS = PickerIOS.Item;
|
||||
|
||||
var STORAGE_KEY = '@AsyncStorageExample:key';
|
||||
var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
|
||||
|
||||
var BasicStorageExample = React.createClass({
|
||||
componentDidMount() {
|
||||
AsyncStorage.getItem(STORAGE_KEY, (error, value) => {
|
||||
if (error) {
|
||||
this._appendMessage('AsyncStorage error: ' + error.message);
|
||||
} else if (value !== null) {
|
||||
this.setState({selectedValue: value});
|
||||
this._appendMessage('Recovered selection from disk: ' + value);
|
||||
} else {
|
||||
this._appendMessage('Initialized with no selection on disk.');
|
||||
}
|
||||
});
|
||||
},
|
||||
getInitialState() {
|
||||
return {
|
||||
selectedValue: COLORS[0],
|
||||
messages: [],
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
var color = this.state.selectedValue;
|
||||
return (
|
||||
<View>
|
||||
<PickerIOS
|
||||
selectedValue={color}
|
||||
onValueChange={this._onValueChange}>
|
||||
{COLORS.map((value) => (
|
||||
<PickerItemIOS
|
||||
key={value}
|
||||
value={value}
|
||||
label={value}
|
||||
/>
|
||||
))}
|
||||
</PickerIOS>
|
||||
<Text>
|
||||
{'Selected: '}
|
||||
<Text style={{color}}>
|
||||
{this.state.selectedValue}
|
||||
</Text>
|
||||
</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text onPress={this._removeStorage}>
|
||||
Press here to remove from storage.
|
||||
</Text>
|
||||
<Text>{' '}</Text>
|
||||
<Text>Messages:</Text>
|
||||
{this.state.messages.map((m) => <Text>{m}</Text>)}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
_onValueChange(selectedValue) {
|
||||
this.setState({selectedValue});
|
||||
AsyncStorage.setItem(STORAGE_KEY, selectedValue, (error) => {
|
||||
if (error) {
|
||||
this._appendMessage('AsyncStorage error: ' + error.message);
|
||||
} else {
|
||||
this._appendMessage('Saved selection to disk: ' + selectedValue);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_removeStorage() {
|
||||
AsyncStorage.removeItem(STORAGE_KEY, (error) => {
|
||||
if (error) {
|
||||
this._appendMessage('AsyncStorage error: ' + error.message);
|
||||
} else {
|
||||
this._appendMessage('Selection removed from disk.');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_appendMessage(message) {
|
||||
this.setState({messages: this.state.messages.concat(message)});
|
||||
},
|
||||
});
|
||||
|
||||
exports.title = 'AsyncStorage';
|
||||
exports.description = 'Asynchronous local disk storage.';
|
||||
exports.examples = [
|
||||
{
|
||||
title: 'Basics - getItem, setItem, removeItem',
|
||||
render() { return <BasicStorageExample />; }
|
||||
},
|
||||
];
|
||||
@@ -16,6 +16,7 @@ var {
|
||||
|
||||
|
||||
var UIExplorerApp = React.createClass({
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<NavigatorIOS
|
||||
@@ -25,7 +26,8 @@ var UIExplorerApp = React.createClass({
|
||||
component: UIExplorerList,
|
||||
}}
|
||||
itemWrapperStyle={styles.itemWrapper}
|
||||
tintColor='#008888'/>
|
||||
tintColor='#008888'
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -37,9 +37,12 @@ var EXAMPLES = [
|
||||
require('./TabBarExample'),
|
||||
require('./SwitchExample'),
|
||||
require('./SliderExample'),
|
||||
require('./AsyncStorageExample'),
|
||||
require('./CameraRollExample.ios'),
|
||||
require('./MapViewExample'),
|
||||
require('./AppStateIOSExample'),
|
||||
require('./AdSupportIOSExample'),
|
||||
require('./AppStateExample'),
|
||||
];
|
||||
|
||||
var UIExplorerList = React.createClass({
|
||||
|
||||
Reference in New Issue
Block a user