status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Kill require('image!...') 

Reviewed By: yungsters

Differential Revision: D4179964

fbshipit-source-id: e56ee7814e23a3afc6223527f1afefe51a9e0aec
This commit is contained in:
Alex Kotliarskyi 2016-11-22 21:01:36 -08:00 committed by Facebook Github Bot
parent cab88104a3
commit 22141468ab
7 changed files with 123 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
Examples/Movies/MoviesApp.android.js
View File

@ -1,4 +1,11 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
@ -18,6 +25,8 @@
var React = require('react');
var ReactNative = require('react-native');
var nativeImageSource = require('nativeImageSource');
var {
AppRegistry,
BackAndroid,
@ -50,7 +59,11 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
<View style={{flex: 1}}>
<ToolbarAndroid
actions={[]}
navIcon={require('image!android_back_white')}
navIcon={nativeImageSource({
android: 'android_back_white',
width: 96,
height: 96
})}
onIconClicked={navigationOperations.pop}
style={styles.toolbar}
titleColor="white"

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

@ -1,4 +1,11 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
@ -18,6 +25,8 @@
var React = require('react');
var ReactNative = require('react-native');
var nativeImageSource = require('nativeImageSource');
var {
Image,
Platform,
@ -42,7 +51,11 @@ class SearchBar extends React.Component {
onPress={() => this.refs.input && this.refs.input.focus()}>
<View>
<Image
source={require('image!android_search_white')}
source={nativeImageSource({
android: 'android_search_white',
width: 96,
height: 96
})}
style={styles.icon}
/>
</View>

14
Examples/UIExplorer/js/ImageCapInsetsExample.js
View File

@ -25,6 +25,8 @@
var React = require('react');
var ReactNative = require('react-native');
var nativeImageSource = require('nativeImageSource');
var {
Image,
StyleSheet,
@ -41,7 +43,11 @@ class ImageCapInsetsExample extends React.Component {
capInsets: none
</Text>
<Image
source={require('image!story-background')}
source={nativeImageSource({
ios: 'story-background',
width: 60,
height: 60
})}
style={styles.storyBackground}
resizeMode={Image.resizeMode.stretch}
capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
@ -52,7 +58,11 @@ class ImageCapInsetsExample extends React.Component {
capInsets: 15
</Text>
<Image
source={require('image!story-background')}
source={nativeImageSource({
ios: 'story-background',
width: 60,
height: 60
})}
style={styles.storyBackground}
resizeMode={Image.resizeMode.stretch}
capInsets={{left: 15, right: 15, bottom: 15, top: 15}}

20
Examples/UIExplorer/js/Navigator/JumpingNavSample.js
View File

@ -22,6 +22,8 @@
var React = require('react');
var ReactNative = require('react-native');
var nativeImageSource = require('nativeImageSource');
var {
Navigator,
StyleSheet,
@ -74,7 +76,11 @@ class JumpingNavBar extends React.Component {
<View style={styles.tabs}>
<TabBarIOS>
<TabBarIOS.Item
icon={require('image!tabnav_notification')}
icon={nativeImageSource({
ios: 'tabnav_notification',
width: 24,
height: 24
})}
selected={this.state.tabIndex === 0}
onPress={() => {
this.props.onTabIndex(0);
@ -83,7 +89,11 @@ class JumpingNavBar extends React.Component {
<View />
</TabBarIOS.Item>
<TabBarIOS.Item
icon={require('image!tabnav_list')}
icon={nativeImageSource({
ios: 'tabnav_list',
width: 24,
height: 24
})}
selected={this.state.tabIndex === 1}
onPress={() => {
this.props.onTabIndex(1);
@ -92,7 +102,11 @@ class JumpingNavBar extends React.Component {
<View />
</TabBarIOS.Item>
<TabBarIOS.Item
icon={require('image!tabnav_settings')}
icon={nativeImageSource({
ios: 'tabnav_settings',
width: 24,
height: 24
})}
selected={this.state.tabIndex === 2}
onPress={() => {
this.props.onTabIndex(2);

8
Examples/UIExplorer/js/NavigatorIOSExample.js
View File

@ -25,7 +25,9 @@
const React = require('react');
const ReactNative = require('react-native');
const ViewExample = require('./ViewExample');
const createExamplePage = require('./createExamplePage');
const nativeImageSource = require('nativeImageSource');
const {
AlertIOS,
NavigatorIOS,
@ -107,7 +109,11 @@ class NavigatorIOSExamplePage extends React.Component {
component: EmptyPage,
leftButtonTitle: 'Custom Left',
onLeftButtonPress: () => this.props.navigator.pop(),
rightButtonIcon: require('image!NavBarButtonPlus'),
rightButtonIcon: nativeImageSource({
ios: 'NavBarButtonPlus',
width: 17,
height: 17
}),
onRightButtonPress: () => {
AlertIOS.alert(
'Bar Button Action',

44
Examples/UIExplorer/js/ToolbarAndroidExample.android.js
View File

@ -24,6 +24,8 @@
var React = require('react');
var ReactNative = require('react-native');
var nativeImageSource = require('nativeImageSource');
var {
StyleSheet,
Text,
@ -54,7 +56,11 @@ class ToolbarAndroidExample extends React.Component {
<UIExplorerBlock title="Toolbar with title/subtitle and actions">
<ToolbarAndroid
actions={toolbarActions}
navIcon={require('image!ic_menu_black_24dp')}
navIcon={nativeImageSource({
android: 'ic_menu_black_24dp',
width: 48,
height: 48
})}
onActionSelected={this._onActionSelected}
onIconClicked={() => this.setState({actionText: 'Icon clicked'})}
style={styles.toolbar}
@ -64,7 +70,11 @@ class ToolbarAndroidExample extends React.Component {
</UIExplorerBlock>
<UIExplorerBlock title="Toolbar with logo & custom title view (a View with Switch+Text)">
<ToolbarAndroid
logo={require('image!launcher_icon')}
logo={nativeImageSource({
android: 'launcher_icon',
width: 132,
height: 144
})}
style={styles.toolbar}>
<View style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
<Switch
@ -83,13 +93,25 @@ class ToolbarAndroidExample extends React.Component {
<UIExplorerBlock title="Toolbar with navIcon & logo, no title">
<ToolbarAndroid
actions={toolbarActions}
logo={require('image!launcher_icon')}
navIcon={require('image!ic_menu_black_24dp')}
logo={nativeImageSource({
android: 'launcher_icon',
width: 132,
height: 144
})}
navIcon={nativeImageSource({
android: 'ic_menu_black_24dp',
width: 48,
height: 48
})}
style={styles.toolbar} />
</UIExplorerBlock>
<UIExplorerBlock title="Toolbar with custom title colors">
<ToolbarAndroid
navIcon={require('image!ic_menu_black_24dp')}
navIcon={nativeImageSource({
android: 'ic_menu_black_24dp',
width: 48,
height: 48
})}
onIconClicked={() => this.setState({colorProps: {}})}
title="Wow, such toolbar"
style={styles.toolbar}
@ -125,9 +147,17 @@ class ToolbarAndroidExample extends React.Component {
}
var toolbarActions = [
{title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'},
{title: 'Create', icon: nativeImageSource({
android: 'ic_create_black_48dp',
width: 96,
height: 96
}), show: 'always'},
{title: 'Filter'},
{title: 'Settings', icon: require('image!ic_settings_black_48dp'), show: 'always'},
{title: 'Settings', icon: nativeImageSource({
android: 'ic_settings_black_48dp',
width: 96,
height: 96
}), show: 'always'},
];
var styles = StyleSheet.create({

26
Examples/UIExplorer/js/UIExplorerApp.android.js
View File

@ -42,6 +42,8 @@ const UIManager = require('UIManager');
const URIActionMap = require('./URIActionMap');
const View = require('View');
const nativeImageSource = require('nativeImageSource');
import type {UIExplorerNavigationState} from './UIExplorerNavigationReducer';
UIManager.setLayoutAnimationEnabledExperimental(true);
@ -152,8 +154,16 @@ class UIExplorerApp extends React.Component {
return (
<View style={styles.container}>
<ToolbarAndroid
logo={require('image!launcher_icon')}
navIcon={require('image!ic_menu_black_24dp')}
logo={nativeImageSource({
android: 'launcher_icon',
width: 132,
height: 144
})}
navIcon={nativeImageSource({
android: 'ic_menu_black_24dp',
width: 48,
height: 48
})}
onIconClicked={() => this.drawer.openDrawer()}
style={styles.toolbar}
title={title}
@ -168,8 +178,16 @@ class UIExplorerApp extends React.Component {
return (
<View style={styles.container}>
<ToolbarAndroid
logo={require('image!launcher_icon')}
navIcon={require('image!ic_menu_black_24dp')}
logo={nativeImageSource({
android: 'launcher_icon',
width: 132,
height: 144
})}
navIcon={nativeImageSource({
android: 'ic_menu_black_24dp',
width: 48,
height: 48
})}
onIconClicked={() => this.drawer.openDrawer()}
style={styles.toolbar}
title={title}