Summary:
This PR adds support for number values for `fontWeight` as requested in https://github.com/facebook/react-native/issues/34425.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[General] [Added] - Added support for number values in fontWeight.

Pull Request resolved: https://github.com/facebook/react-native/pull/34598

Test Plan:
```js
<Text style={{ fontWeight: 900, color: 'red' }}>
  Hello World
</Text>
```

Reviewed By: jacdebug

Differential Revision: D39268920

Pulled By: cipolleschi

fbshipit-source-id: 9bb711677bf173f9904b74f382659042856efd83
This commit is contained in:
ankit-tailor 2022-09-12 02:12:23 -07:00 коммит произвёл Facebook GitHub Bot
Родитель 4e70376dc7
Коммит f1c1f8116b
4 изменённых файлов: 64 добавлений и 4 удалений

Просмотреть файл

@ -566,6 +566,23 @@ export type ____ViewStyle_Internal = $ReadOnly<{
...____ViewStyle_InternalOverrides,
}>;
export type FontStyleType = {
fontFamily: string,
fontWeight: ____FontWeight_Internal,
};
export type FontStyleMap = {
ultraLight: FontStyleType,
thin: FontStyleType,
light: FontStyleType,
regular: FontStyleType,
medium: FontStyleType,
semibold: FontStyleType,
bold: FontStyleType,
heavy: FontStyleType,
black: FontStyleType,
};
export type ____FontWeight_Internal =
| 'normal'
| 'bold'
@ -577,7 +594,26 @@ export type ____FontWeight_Internal =
| '600'
| '700'
| '800'
| '900';
| '900'
| 100
| 200
| 300
| 400
| 500
| 600
| 700
| 800
| 900
| 'ultralight'
| 'thin'
| 'light'
| 'medium'
| 'regular'
| 'semibold'
| 'condensedBold'
| 'condensed'
| 'heavy'
| 'black';
export type ____TextStyle_InternalCore = $ReadOnly<{
...$Exact<____ViewStyle_Internal>,

Просмотреть файл

@ -14,13 +14,13 @@ import Platform from '../Utilities/Platform';
import * as PressabilityDebug from '../Pressability/PressabilityDebug';
import usePressability from '../Pressability/usePressability';
import StyleSheet from '../StyleSheet/StyleSheet';
import flattenStyle from '../StyleSheet/flattenStyle';
import processColor from '../StyleSheet/processColor';
import TextAncestor from './TextAncestor';
import {NativeText, NativeVirtualText} from './TextNativeComponent';
import {type TextProps} from './TextProps';
import * as React from 'react';
import {useContext, useMemo, useState} from 'react';
import flattenStyle from '../StyleSheet/flattenStyle';
/**
* Text is the fundamental component for displaying text.
@ -201,6 +201,12 @@ const Text: React.AbstractComponent<
default: accessible,
});
let flattenedStyle = flattenStyle(style);
if (typeof flattenedStyle?.fontWeight === 'number') {
flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
}
return hasTextAncestor ? (
<NativeVirtualText
{...restProps}
@ -213,7 +219,7 @@ const Text: React.AbstractComponent<
nativeID={id ?? nativeID}
numberOfLines={numberOfLines}
selectionColor={selectionColor}
style={style}
style={flattenedStyle}
ref={forwardedRef}
/>
) : (
@ -232,7 +238,7 @@ const Text: React.AbstractComponent<
nativeID={id ?? nativeID}
numberOfLines={numberOfLines}
selectionColor={selectionColor}
style={style}
style={flattenedStyle}
ref={forwardedRef}
/>
</TextAncestor.Provider>

Просмотреть файл

@ -392,6 +392,15 @@ class TextExample extends React.Component<{...}> {
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
<Text style={{fontWeight: 900}}>FONT WEIGHT 900</Text>
<Text style={{fontWeight: 800}}>FONT WEIGHT 800</Text>
<Text style={{fontWeight: 700}}>FONT WEIGHT 700</Text>
<Text style={{fontWeight: 600}}>FONT WEIGHT 600</Text>
<Text style={{fontWeight: 500}}>FONT WEIGHT 500</Text>
<Text style={{fontWeight: 400}}>FONT WEIGHT 400</Text>
<Text style={{fontWeight: 300}}>FONT WEIGHT 300</Text>
<Text style={{fontWeight: 200}}>FONT WEIGHT 200</Text>
<Text style={{fontWeight: 100}}>FONT WEIGHT 100</Text>
</RNTesterBlock>
<RNTesterBlock title="Font Style">
<Text style={{fontStyle: 'italic'}}>Move fast and be italic</Text>

Просмотреть файл

@ -681,6 +681,15 @@ exports.examples = [
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
<Text style={{fontWeight: 900}}>FONT WEIGHT 900</Text>
<Text style={{fontWeight: 800}}>FONT WEIGHT 800</Text>
<Text style={{fontWeight: 700}}>FONT WEIGHT 700</Text>
<Text style={{fontWeight: 600}}>FONT WEIGHT 600</Text>
<Text style={{fontWeight: 500}}>FONT WEIGHT 500</Text>
<Text style={{fontWeight: 400}}>FONT WEIGHT 400</Text>
<Text style={{fontWeight: 300}}>FONT WEIGHT 300</Text>
<Text style={{fontWeight: 200}}>FONT WEIGHT 200</Text>
<Text style={{fontWeight: 100}}>FONT WEIGHT 100</Text>
</View>
);
},