réagir natif texte imbriqué avec differnt fontsizes (initiale, la première lettre)

Question

J'écris actuellement une application de lecteur de nouvelles à réagir natif et que vous voulez le style de la première lettre d'un article comme une première, comme ci-dessous:

Pour ma première tentative j'utilise l'approche de texte imbriquée. Le code est joint ci-dessous. Et voici mon résultat courant:

Le code dans la fonction render:

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

Mon style:

const fontSize = 14; 

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

Ma question: Comment puis-je le style mon premier personnage à avoir une jolie initiale?

Environnement

• RÉACTION: 16.0.0-alpha.6
• réagissez-natif: 0.44.2
• Android 6.0 sur un Nexus émulé 5

Answer 1

C'est une façon de le faire:

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

Je pense que c'est la meilleure solution pour votre question

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

simplement convertir réagir css style

Answer 3

vous pouvez essayer aussi de cette façon, ajoutez le style régulier pour l'élément de texte parent et le style requis pour l'élément enfant de texte « 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', 
    }