Text 使用不同字体大小（首字母，第一个字母）反应本机嵌套文本

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

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

渲染函数中的代码：

<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>

我的问题： 如何设置第一个字符的样式以获得一个非常好的首字母

环境

• 反应：16.0.0-alpha.6
• 反应本机：0.44.2
• 模拟Nexus5上的Android 6.0

---

这是一种方法：

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,
  }
});

导出默认类DemoProject扩展组件{
render（）{
返回(
W
埃尔康
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
flexDirection:“行”
},
textCommon：{
颜色：'#333333'，
},
第一封信：{
尺寸：23，
}
});

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

---

只需将css转换为react样式
您也可以通过这种方式尝试，为父文本元素添加常规样式，为“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',
    }

导出默认类DemoProject扩展组件{
render（）{
返回(
*
W
埃尔康*
);
}
}
正文：{
fontSize:fontSize，
颜色：'#333333'，
}

谢谢你的回答：）我已经试过了。只要一个字就可以了。但是，如果你在“elcome”后面加上整段文字，效果就不理想了。试过用“欢迎我亲爱的朋友，你好吗？”这样的文字对我仍然有效。你是说一个新行段落吗？是的，我是说一个有很多换行符的段落。看看我的第一张照片，给人留下更好的印象。这一点更接近了：在容器样式中：

justifyincontent:'flex start'，alignItems:'flex start'，

但它并不完美；）以下段落应围绕“W”展开。谢谢您的回答！：）如何将

.text文章：第一个字母
转换为react native？
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',
    }