反應，本地人，有着不同的充fontsizes（初始，第一個字母）

Question

我現在寫的反應本地新聞閱讀器應用程序，並且希望樣式文章的第一個字母爲初始，像下面嵌套的文字：

我第一次嘗試使用嵌套文本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> 

我的樣式表：

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
• 的Android 6.0上的仿真的Nexus 5

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

Answer 2

我認爲這是針對您的問題的最佳解決方案

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

只是轉換CSS反應式

Answer 3

你可以這樣嘗試過，增加對父文本元素的常規款式和風格的要求，爲「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', 
    }