diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 3c03b531c17..3a72de5b707 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,149 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

ActivityIndicatorIOS

Edit on GitHubProps #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Next →
React Native

Quick Start

Guides

components

apis

Polyfills

ActivityIndicatorIOS

Edit on GitHubProps #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Edit on GitHubExamples #

'use strict'; + +var React = require('react-native'); +var { + ActivityIndicatorIOS, + StyleSheet, + View, +} = React; +var TimerMixin = require('react-timer-mixin'); + +var ToggleAnimatingActivityIndicator = React.createClass({ + mixins: [TimerMixin], + + getInitialState: function() { + return { + animating: true, + }; + }, + + setToggleTimeout: function() { + this.setTimeout( + () => { + this.setState({animating: !this.state.animating}); + this.setToggleTimeout(); + }, + 1200 + ); + }, + + componentDidMount: function() { + this.setToggleTimeout(); + }, + + render: function() { + return ( + <ActivityIndicatorIOS + animating={this.state.animating} + style={[styles.centering, {height: 80}]} + size="large" + /> + ); + } +}); + +exports.framework = 'React'; +exports.title = '<ActivityIndicatorIOS>'; +exports.description = 'Animated loading indicators.'; + +exports.examples = [ + { + title: 'Default (small, white)', + render: function() { + return ( + <ActivityIndicatorIOS + style={[styles.centering, styles.gray, {height: 40}]} + color="white" + /> + ); + } + }, + { + title: 'Gray', + render: function() { + return ( + <View> + <ActivityIndicatorIOS + style={[styles.centering, {height: 40}]} + /> + <ActivityIndicatorIOS + style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]} + /> + </View> + ); + } + }, + { + title: 'Custom colors', + render: function() { + return ( + <View style={styles.horizontal}> + <ActivityIndicatorIOS color="#0000ff" /> + <ActivityIndicatorIOS color="#aa00aa" /> + <ActivityIndicatorIOS color="#aa3300" /> + <ActivityIndicatorIOS color="#00aa00" /> + </View> + ); + } + }, + { + title: 'Large', + render: function() { + return ( + <ActivityIndicatorIOS + style={[styles.centering, styles.gray, {height: 80}]} + color="white" + size="large" + /> + ); + } + }, + { + title: 'Large, custom colors', + render: function() { + return ( + <View style={styles.horizontal}> + <ActivityIndicatorIOS + size="large" + color="#0000ff" + /> + <ActivityIndicatorIOS + size="large" + color="#aa00aa" + /> + <ActivityIndicatorIOS + size="large" + color="#aa3300" + /> + <ActivityIndicatorIOS + size="large" + color="#00aa00" + /> + </View> + ); + } + }, + { + title: 'Start/stop', + render: function(): ReactElement { + return <ToggleAnimatingActivityIndicator />; + } + }, +]; + +var styles = StyleSheet.create({ + centering: { + alignItems: 'center', + justifyContent: 'center', + }, + gray: { + backgroundColor: '#cccccc', + }, + horizontal: { + flexDirection: 'row', + justifyContent: 'space-around', + }, +});
Next →
React Native

Quick Start

Guides

components

apis

Polyfills

PickerIOS

Edit on GitHubProps #

onValueChange function #

selectedValue any #

Next →
React Native

Quick Start

Guides

components

apis

Polyfills

PickerIOS

Edit on GitHubProps #

onValueChange function #

selectedValue any #

Edit on GitHubExamples #

'use strict'; + +var React = require('react-native'); +var { + PickerIOS, + Text, + View, +} = React; + +var PickerItemIOS = PickerIOS.Item; + +var CAR_MAKES_AND_MODELS = { + amc: { + name: 'AMC', + models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'], + }, + alfa: { + name: 'Alfa-Romeo', + models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'], + }, + aston: { + name: 'Aston Martin', + models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'], + }, + audi: { + name: 'Audi', + models: ['90', '4000', '5000', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'Q5', 'Q7'], + }, + austin: { + name: 'Austin', + models: ['America', 'Maestro', 'Maxi', 'Mini', 'Montego', 'Princess'], + }, + borgward: { + name: 'Borgward', + models: ['Hansa', 'Isabella', 'P100'], + }, + buick: { + name: 'Buick', + models: ['Electra', 'LaCrosse', 'LeSabre', 'Park Avenue', 'Regal', + 'Roadmaster', 'Skylark'], + }, + cadillac: { + name: 'Cadillac', + models: ['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville'], + }, + chevrolet: { + name: 'Chevrolet', + models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle', + 'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt'], + }, +}; + +var PickerExample = React.createClass({ + getInitialState: function() { + return { + carMake: 'cadillac', + modelIndex: 3, + }; + }, + + render: function() { + var make = CAR_MAKES_AND_MODELS[this.state.carMake]; + var selectionString = make.name + ' ' + make.models[this.state.modelIndex]; + return ( + <View> + <Text>Please choose a make for your car:</Text> + <PickerIOS + selectedValue={this.state.carMake} + onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}> + {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => ( + <PickerItemIOS + key={carMake} + value={carMake} + label={CAR_MAKES_AND_MODELS[carMake].name} + /> + ) + )} + </PickerIOS> + <Text>Please choose a model of {make.name}:</Text> + <PickerIOS + selectedValue={this.state.modelIndex} + key={this.state.carMake} + onValueChange={(modelIndex) => this.setState({modelIndex})}> + {CAR_MAKES_AND_MODELS[this.state.carMake].models.map( + (modelName, modelIndex) => ( + <PickerItemIOS + key={this.state.carmake + '_' + modelIndex} + value={modelIndex} + label={modelName} + /> + )) + } + </PickerIOS> + <Text>You selected: {selectionString}</Text> + </View> + ); + }, +}); + +exports.title = '<PickerIOS>'; +exports.description = 'Render lists of selectable options with UIPickerView.'; +exports.examples = [ +{ + title: '<PickerIOS>', + render: function(): ReactElement { + return <PickerExample />; + }, +}];
Next →
React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS

Edit on GitHubProps #

Next →
React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS

Edit on GitHubProps #

Edit on GitHubExamples #

'use strict'; + +var React = require('react-native'); +var { + StyleSheet, + TabBarIOS, + Text, + View, +} = React; +var TabBarItemIOS = TabBarIOS.Item; +var TabBarExample = React.createClass({ + + statics: { + title: '<TabBarIOS>', + description: 'Tab-based navigation.' + }, + + getInitialState: function() { + return { + selectedTab: 'redTab', + notifCount: 0, + presses: 0, + }; + }, + + _renderContent: function(color: string, pageText: string) { + return ( + <View style={[styles.tabContent, {backgroundColor: color}]}> + <Text style={styles.tabText}>{pageText}</Text> + <Text style={styles.tabText}>{this.state.presses} re-renders of this tab</Text> + </View> + ); + }, + + render: function() { + return ( + <TabBarIOS + selectedTab={this.state.selectedTab}> + <TabBarItemIOS + name="blueTab" + icon={_ix_DEPRECATED('favorites')} + accessibilityLabel="Blue Tab" + selected={this.state.selectedTab === 'blueTab'} + onPress={() => { + this.setState({ + selectedTab: 'blueTab', + }); + }}> + {this._renderContent('#414A8C', 'Blue Tab')} + </TabBarItemIOS> + <TabBarItemIOS + accessibilityLabel="Red Tab" + name="redTab" + icon={_ix_DEPRECATED('history')} + badgeValue={this.state.notifCount ? String(this.state.notifCount) : null} + selected={this.state.selectedTab === 'redTab'} + onPress={() => { + this.setState({ + selectedTab: 'redTab', + notifCount: this.state.notifCount + 1, + }); + }}> + {this._renderContent('#783E33', 'Red Tab')} + </TabBarItemIOS> + <TabBarItemIOS + name="greenTab" + icon={_ix_DEPRECATED('more')} + accessibilityLabel="Green Tab" + selected={this.state.selectedTab === 'greenTab'} + onPress={() => { + this.setState({ + selectedTab: 'greenTab', + presses: this.state.presses + 1 + }); + }}> + {this._renderContent('#21551C', 'Green Tab')} + </TabBarItemIOS> + </TabBarIOS> + ); + }, + +}); + +var styles = StyleSheet.create({ + tabContent: { + flex: 1, + alignItems: 'center', + }, + tabText: { + color: 'white', + margin: 50, + }, +}); + +// This is needed because the actual image may not exist as a file and +// is used by the native code to load a system image. +// TODO(nicklockwood): How can this fit our require system? +function _ix_DEPRECATED(imageUri) { + return { + uri: imageUri, + isStatic: true, + }; +} + +module.exports = TabBarExample;
Next →