文本组件的样式部分

Question

我正在尝试制作反应本机组件，其中同一组件中的不同单词具有不同的样式。

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

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

我需要将字幕包装在它自己的组件中以便我可以设置它的样式吗？

第二个例子

我有另一个带有文本组件的按钮绿色 - 最佳选择我需要 "green" 这个词是绿色的。

Answer 1

第一个问题，一个有标题和副标题的按钮，你可以用一个TouchableHighlight包装一个视图，然后放置多个Text元素来创建一个标题和一个副标题：

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

中使用 span 所做的那样

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

对于float:right的问题：在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);

文本组件的样式部分

Style part of a text component

flexbox

react-native