文本组件的样式部分

Question

我试图使同一组件中不同单词具有不同样式的原生组件反应。

例如，我在按钮上有名称和副标题的按钮，我希望副标题文字更小。

<Text style={styles.buttonText}>{speciesArry[i].title} {"\n"}  {speciesArry[i].subtitle}</Text> 

我需要包装的字幕可以在自己的组件，以便我可以风格呢？

第二个例子

我与文本组件 绿色另一个按钮 - 最好的选择 我需要的单词“绿色”是绿色的。

Answer 1

对于第一个问题，有一个标题和字幕的按钮，就可以在TouchableHighlight包装一个视图，然后放置多个文本元素，创造一个标题和副标题：

<TouchableHighlight style={{height:70, backgroundColor: 'blue'}}> 
    <View style={{flexDirection: 'column', }}> 
     <Text style={{textAlign:'center', color: 'white', fontSize:22, marginTop:10}}>MAIN TEXT</Text> 
     <Text style={{textAlign:'center', color: 'white', fontSize:14}}>Subtitle</Text> 
    </View> 
</TouchableHighlight> 

对于第二问题，单个文本组件中具有不同的造型，你需要文本组件内换行文本组件，则可能是一个跨度的HTML做的方式：

<Text style={styles.mainStyle}>This text is red, <Text style={styles.blacktext}>this text is black, </Text><Text style={styles.boldgreen}>this text is bold and green!</Text></Text> 

你上面提供看起来像按钮例子这个：

<TouchableHighlight style={{height:70, backgroundColor: 'orange'}}> 
    <View style={{ flexDirection: 'row', justifyContent:'center'}}> 
     <Text style={{fontSize:18, marginTop: 22}}><Text style={{color: 'green'}}>Green</Text> - best Choice</Text> 
    </View> 
</TouchableHighlight> 

对于浮动：正确的问题：在flexbox中没有任何与它完全相同的东西，但它有一些非常类似于它的东西：justifyContent：'flex-end'。下面是如何会看，我已经更新了原点项目，以反映下面的代码：

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}> 
    <Text>Floating right</Text> 
</View> 

我已经建立了一个完整的工作项目与上面的例子here，并粘贴整个代码为项目也在下面。希望这可以帮助！

https://rnplay.org/apps/KqE-cA

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
} = React; 

var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <View style={{marginTop:70}}> 
      <TouchableHighlight style={{height:70, backgroundColor: 'blue'}}> 
       <View style={{flexDirection: 'column', }}> 
       <Text style={{textAlign:'center', color: 'white', fontSize:22, marginTop:10}}>MAIN TEXT</Text> 
       <Text style={{textAlign:'center', color: 'white', fontSize:14}}>Subtitle</Text> 
      </View> 
      </TouchableHighlight> 
     </View> 

     <View style={{marginTop:20}}> 
      <Text style={styles.mainStyle}>This text is red, <Text style={styles.blacktext}>this text is black, </Text><Text style={styles.boldgreen}>this text is bold and green!</Text></Text>   
     </View> 

     <View style={{marginTop:20}}> 
      <TouchableHighlight style={{height:70, backgroundColor: 'orange'}}> 
       <View style={{ flexDirection: 'row', justifyContent:'center'}}> 
       <Text style={{fontSize:18, marginTop: 22}}><Text style={{color: 'green'}}>Green</Text> - best Choice</Text> 
       </View> 
      </TouchableHighlight> 
     </View> 

     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    mainStyle: { 
    color: 'red' 
    }, 
    blacktext: { 
    color: 'black' 
    }, 
    boldgreen: { 
    color: 'green', 
    fontWeight: 'bold' 
    } 

}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp);