move Hermes badge from template to NewAppScreen library (#28783)
Summary: Refs https://github.com/facebook/react-native/issues/28711 This PR moves Hermes badge component from the template to the `NewAppScreen` library. The main motivation behind this change was to simplify a bit template code. I assumed that it is not important to expose `global.HermesInternal` to the template users: * If this assumption is true, I think that there are no other reason to leave this component inside `App` in comparison to other `NewAppScreen` components, * If this assumption is false, I can adjust this PR and move `HermesInternal` check from the badge component to the `App`. I was trying to avoid calling `useColorScheme` when Hermes is disabled, but placing hook inside the conditional branch causes ESLint warning (react-hooks/rules-of-hooks). This PR includes also small style tweaks for the badge - since there are no background padding can be omitted and spacing can be added adjusted tweaking `top` and `left` properties and `fontSize` has been adjusted just for the readability. In the last commit, I have gone a bit further and moved `HermesBadge` to the `Header` component and I have also changed slightly the `Header` title (React -> React Native) and it's styling. > I'm not sure if after this change `HermesBadge` export in `NewAppScreen` components list is still required, but maybe this badge will be useful for someone. If it's a mistake I can update the PR and remove this export. ## Changelog [Internal][Changed] move Hermes badge from the template to the NewAppScreen library Pull Request resolved: https://github.com/facebook/react-native/pull/28783 Test Plan: Template app do not redbox on Android emulator with and without Hermes enabled. ## Preview Android with Hermes enabled and adjusted header: ![Screenshot_1588164908](https://user-images.githubusercontent.com/719641/80599357-16dc8900-8a2b-11ea-8b3e-9a2cb26d3470.png) iOS with adjusted header: ![IMG_6551](https://user-images.githubusercontent.com/719641/80599445-3bd0fc00-8a2b-11ea-8215-318625ddad13.PNG) Reviewed By: GijsWeterings Differential Revision: D22493822 Pulled By: cpojer fbshipit-source-id: 3440e10f2d59f268ca8851a6e002f0ff23fa839c
This commit is contained in:
Родитель
4a97791341
Коммит
1c634a9218
|
@ -9,10 +9,11 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
import Colors from './Colors';
|
|
||||||
import type {Node} from 'react';
|
import type {Node} from 'react';
|
||||||
import {ImageBackground, StyleSheet, Text, useColorScheme} from 'react-native';
|
import {ImageBackground, StyleSheet, Text, useColorScheme} from 'react-native';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import Colors from './Colors';
|
||||||
|
import HermesBadge from './HermesBadge';
|
||||||
|
|
||||||
const Header = (): Node => {
|
const Header = (): Node => {
|
||||||
const isDarkMode = useColorScheme() === 'dark';
|
const isDarkMode = useColorScheme() === 'dark';
|
||||||
|
@ -27,6 +28,7 @@ const Header = (): Node => {
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
imageStyle={styles.logo}>
|
imageStyle={styles.logo}>
|
||||||
|
<HermesBadge />
|
||||||
<Text
|
<Text
|
||||||
style={[
|
style={[
|
||||||
styles.text,
|
styles.text,
|
||||||
|
@ -34,7 +36,9 @@ const Header = (): Node => {
|
||||||
color: isDarkMode ? Colors.white : Colors.black,
|
color: isDarkMode ? Colors.white : Colors.black,
|
||||||
},
|
},
|
||||||
]}>
|
]}>
|
||||||
Welcome to React
|
Welcome to
|
||||||
|
{'\n'}
|
||||||
|
React Native
|
||||||
</Text>
|
</Text>
|
||||||
</ImageBackground>
|
</ImageBackground>
|
||||||
);
|
);
|
||||||
|
@ -61,7 +65,7 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
fontSize: 40,
|
fontSize: 40,
|
||||||
fontWeight: '600',
|
fontWeight: '700',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*
|
||||||
|
* @flow strict-local
|
||||||
|
* @format
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import type {Node} from 'react';
|
||||||
|
import {StyleSheet, Text, useColorScheme, View} from 'react-native';
|
||||||
|
import Colors from './Colors';
|
||||||
|
|
||||||
|
const HermesBadge = (): Node => {
|
||||||
|
const isDarkMode = useColorScheme() === 'dark';
|
||||||
|
return global.HermesInternal ? (
|
||||||
|
<View style={styles.badge}>
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
styles.badgeText,
|
||||||
|
{
|
||||||
|
color: isDarkMode ? Colors.light : Colors.dark,
|
||||||
|
},
|
||||||
|
]}>
|
||||||
|
Engine: Hermes
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
) : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
badge: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 8,
|
||||||
|
right: 12,
|
||||||
|
},
|
||||||
|
badgeText: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '600',
|
||||||
|
textAlign: 'right',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default HermesBadge;
|
|
@ -10,10 +10,18 @@
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import Header from './components/Header';
|
|
||||||
import LearnMoreLinks from './components/LearnMoreLinks';
|
|
||||||
import Colors from './components/Colors';
|
import Colors from './components/Colors';
|
||||||
|
import Header from './components/Header';
|
||||||
|
import HermesBadge from './components/HermesBadge';
|
||||||
|
import LearnMoreLinks from './components/LearnMoreLinks';
|
||||||
import DebugInstructions from './components/DebugInstructions';
|
import DebugInstructions from './components/DebugInstructions';
|
||||||
import ReloadInstructions from './components/ReloadInstructions';
|
import ReloadInstructions from './components/ReloadInstructions';
|
||||||
|
|
||||||
export {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions};
|
export {
|
||||||
|
Colors,
|
||||||
|
Header,
|
||||||
|
HermesBadge,
|
||||||
|
LearnMoreLinks,
|
||||||
|
DebugInstructions,
|
||||||
|
ReloadInstructions,
|
||||||
|
};
|
||||||
|
|
|
@ -59,20 +59,6 @@ const App: () => Node = () => {
|
||||||
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
|
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
|
||||||
};
|
};
|
||||||
|
|
||||||
const hermes = global.HermesInternal ? (
|
|
||||||
<View style={styles.engine}>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
styles.footer,
|
|
||||||
{
|
|
||||||
color: isDarkMode ? Colors.light : Colors.dark,
|
|
||||||
},
|
|
||||||
]}>
|
|
||||||
Engine: Hermes
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style={backgroundStyle}>
|
<SafeAreaView style={backgroundStyle}>
|
||||||
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
||||||
|
@ -80,7 +66,6 @@ const App: () => Node = () => {
|
||||||
contentInsetAdjustmentBehavior="automatic"
|
contentInsetAdjustmentBehavior="automatic"
|
||||||
style={backgroundStyle}>
|
style={backgroundStyle}>
|
||||||
<Header />
|
<Header />
|
||||||
{hermes}
|
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: isDarkMode ? Colors.black : Colors.white,
|
backgroundColor: isDarkMode ? Colors.black : Colors.white,
|
||||||
|
@ -106,10 +91,6 @@ const App: () => Node = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
engine: {
|
|
||||||
position: 'absolute',
|
|
||||||
right: 0,
|
|
||||||
},
|
|
||||||
sectionContainer: {
|
sectionContainer: {
|
||||||
marginTop: 32,
|
marginTop: 32,
|
||||||
paddingHorizontal: 24,
|
paddingHorizontal: 24,
|
||||||
|
@ -126,13 +107,6 @@ const styles = StyleSheet.create({
|
||||||
highlight: {
|
highlight: {
|
||||||
fontWeight: '700',
|
fontWeight: '700',
|
||||||
},
|
},
|
||||||
footer: {
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: '600',
|
|
||||||
padding: 4,
|
|
||||||
paddingRight: 12,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
Загрузка…
Ссылка в новой задаче