React Native使用TouchableOpacity设置按钮文本颜色时触发渲染错误的问题求助

我在React Native应用里尝试通过TouchableOpacity组件设置按钮的文本颜色，用了网上常见的写法却触发了错误，想请教正确的写法是什么。

我的代码如下：

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';

class App extends Component {
  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text> style={{color: '#FFFFFF'}}>Hippo counter</Text>
        </TouchableOpacity>
        <View>
          <Text>Hippo count: {this.state.count}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DF0000',
    padding: 10,
    marginBottom: 10
  },
});

export default App;

运行应用时出现了以下错误：

Render Error

Objects are not valid as a React child (found: object with keys {color}). If you meant to render a collection of children, use an array instead.

如果把style={{color: '#FFFFFF'}}>这段代码删掉，应用就能正常运行，但这样就没法设置文本颜色了，请问我该怎么修改才能正确设置按钮文本的颜色？

问题原因分析 #

你出错的核心是**style属性的位置写错了**！

看你写的<Text> style={{color: '#FFFFFF'}}>Hippo counter</Text>，这里相当于把style={{color: '#FFFFFF'}}作为Text组件的子元素来渲染了——React没法直接渲染一个对象类型的子元素，所以才会抛出“Objects are not valid as a React child”的错误。

style应该是Text组件的标签属性，而不是单独的内容。

修正后的代码 #

只需要把style移到Text的标签内部作为属性传入即可：

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';

class App extends Component {
  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          {/* 修正：把style作为Text组件的属性传入 */}
          <Text style={{color: '#FFFFFF'}}>Hippo counter</Text>
        </TouchableOpacity>
        <View>
          <Text>Hippo count: {this.state.count}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DF0000',
    padding: 10,
    marginBottom: 10
  },
});

export default App;

更规范的写法（推荐） #

如果项目样式较多，推荐把文本样式也写到StyleSheet里，方便统一管理和修改：

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';

class App extends Component {
  state = {
    count: 0,
  };

  onPress = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text style={styles.buttonText}>Hippo counter</Text>
        </TouchableOpacity>
        <View>
          <Text>Hippo count: {this.state.count}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DF0000',
    padding: 10,
    marginBottom: 10
  },
  // 新增按钮文本样式
  buttonText: {
    color: '#FFFFFF'
  }
});

export default App;

这样修改后，按钮文本就能正常显示白色，应用也不会再抛出错误啦。

备注：内容来源于stack exchange，提问作者HippoMan