React Native 下拉框内嵌表格的文本如何设置两种不同颜色？

你可以通过传入自定义嵌套Text组件实现同一段文本不同部分独立配色，react-native-table-component的表格单元格支持直接渲染React元素，不需要额外配置。

核心逻辑是React Native支持Text组件嵌套，内层Text可以继承外层的基础样式，同时可以覆盖特定样式属性（比如颜色），完全满足同段文本多配色需求，你只需要调整state内的表格数据，将需要单独改色的文本片段拆分包裹为独立的Text组件即可，以下是修改后的完整代码：

import React, { Component }  from 'react'
import { StyleSheet, Text, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
import { colors } from '../Themes/Colors';

export default class ExampleOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: [
        // 拆分文本，单独给text片段设置自定义配色
        <Text>Random <Text style={{color: 'red'}}>text</Text></Text>
      ],
      tableData: [
        ['PRET REDUS', ' TVA inclus'],
        // 示例：单独给数字30设置自定义配色
        [<Text>REDUS: <Text style={{color: 'green'}}>30</Text></Text>]
      ],
    }
  }

  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 3, borderColor: colors.yellow}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={state.tableData} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: { flex: 1, padding:10, paddingTop: -10 ,margin: 6, marginLeft:30},
  head: { height: 40 },
  text: { margin: 6, color:colors.yellow }
});

如果有更多需要拆分配色的片段，按相同方式嵌套Text组件即可，不需要修改表格的其他渲染逻辑。

内容的提问来源于stack exchange，提问作者Florin Ciobanu