具有不同字体大小（首字母，首字母）的 react-native 嵌套文本

Posted 2023-03-06

【中文标题】具有不同字体大小（首字母，首字母）的 react-native 嵌套文本

【英文标题】：react-native nested text with differnt fontsizes (initial, first letter)

【发布时间】：2017-10-30 16:15:16

【问题描述】：

我目前在 react-native 中编写了一个新闻阅读器应用程序，并希望将文章的第一个字母设置为首字母，如下所示：

我第一次尝试使用嵌套文本方法。代码附在下面。这是我目前的结果：

渲染函数中的代码：

<View style=styles.container>
    <Text style=styles.text>
        <Text style=styles.initial>W</Text>
        <Text>
            elcome to React Native! To get started, edit index.android.js To get started, edit index.android.js To get started, edit index.android.js
        </Text>
    </Text>
</View>

我的样式表：

const fontSize = 14;

const styles = StyleSheet.create(
    container: 
        flex: 1,
        backgroundColor: '#F5FCFF',
    ,
    initial: 
        fontSize: fontSize * 2,            
    ,
    text: 
        fontSize: fontSize,
        color: '#333333',
    ,
);

我的问题： 如何设置第一个字符的样式以获得漂亮的首字母？

环境

反应：16.0.0-alpha.6 反应原生：0.44.2 模拟 Nexus 5 上的 Android 6.0

【参考方案1】：

这是一种方法：

export default class DemoProject extends Component 
  render() 
    return (
      <View style=styles.container>
        <Text style=[styles.textCommon, styles.firstLetter]>W</Text>
        <Text>elcome</Text>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row'
  ,
  textCommon: 
    color: '#333333',
  ,
  firstLetter: 
    fontSize: 23,
  
);

【讨论】：

谢谢你的回答:) 我试过了。就一个字就可以了。但是如果你在 'elcome' 之后添加整个段落，它就不会达到预期的效果。

尝试使用文本“欢迎我亲爱的朋友，你好吗？”仍然对我有用。您的意思是换行段落吗？

是的，我的意思是一个有很多换行符的段落。看看我的第一个 picture 以获得更好的印象。使用这种方法更接近：在容器样式中：justifyContent: 'flex-start', alignItems: 'flex-start', 但它并不完美；）以下段落应围绕“W”流动。

【参考方案2】：

我认为这是您问题的最佳解决方案

How can I make the first letter push itself into the paragraph like a newspaper style?

只需将 css 转换为 react-style

【讨论】：

感谢您的回答！ :) 你如何将.text-article:first-letter 转换为 react-native？

【参考方案3】：

你也可以试试这种方式，为父Text元素添加常规样式，为“W”文本子元素添加所需样式。

export default class DemoProject extends Component 
  render() 
    return (
      <View style=styles.container>
        *<Text>
          <Text style=[styles.textCommon, styles.firstLetter]>W</Text>
        elcome</Text>*
      </View>
    );
  



  text: 
        fontSize: fontSize,
        color: '#333333',