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

Question

我目前正在用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

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