css - React-NativeJavascript: unable to set button text via TouchableOpacity - Stack Overflow

admin管理员组

文章数量:1393120

I'm trying to set the text color of a button in my react-native app via the TouchableOpacity object. I am using the same code for doing this that I have seen in numerous places on line, but it is generating an error for me. I'm trying to figure out what the correct coding of this has to be.

Here is the app ...

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;

When I run this react-native app, I get the following error:

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.

Given that this same procedure for setting button text color works in a number of examples that I have found on line, I'm wondering what else I might be doing incorrectly which triggers this error in my specific case.

If I remove style={{color: '#FFFFFF'}}>, from the "Text" attribute of the "TouchableOpacity" object, then the app runs properly. So what must I do in order to change this text color?

I'm trying to set the text color of a button in my react-native app via the TouchableOpacity object. I am using the same code for doing this that I have seen in numerous places on line, but it is generating an error for me. I'm trying to figure out what the correct coding of this has to be.

Here is the app ...

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;

When I run this react-native app, I get the following error:

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.

Given that this same procedure for setting button text color works in a number of examples that I have found on line, I'm wondering what else I might be doing incorrectly which triggers this error in my specific case.

If I remove style={{color: '#FFFFFF'}}>, from the "Text" attribute of the "TouchableOpacity" object, then the app runs properly. So what must I do in order to change this text color?

• javascript
• css
• react-native
• text
• render

Share Improve this question Follow edited Mar 14 at 13:41 TylerH 21.1k7979 gold badges7979 silver badges114114 bronze badges asked Mar 14 at 0:41 HippoManHippoMan 2,34022 gold badges2626 silver badges5656 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

There is a small typo here :

<Text> style={{color: '#FFFFFF'}}Hippo counter</Text>

You are closing the Text tag too soon.

Corrected :

<Text style={{color: '#FFFFFF'}}>Hippo counter</Text>

本文标签： cssReactNativeJavascript unable to set button text via TouchableOpacityStack Overflow