反应本机文本颜色不起作用

时间:2018-08-02 23:33:57

标签: javascript android reactjs react-native

我在Text中有一个TouchableOpacity组件,我想根据变量来更改颜色。

这是我的代码:

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

var flag = false;

export default class MyTest extends Component {
  changeColor() {
    flag = true;
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
          onPress={this.changeColor.bind(this)}
        >
          <Text style={[{ color: "blue" }, flag ? { color: "red" } : false]}>
            One
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#F5FCFF"
  }
});

我尝试使用this.state.textColor,但没有结果。我也曾尝试在styles变量中使用它,但同样不能正常工作。

有什么主意吗?

2 个答案:

答案 0 :(得分:2)

class _YourWidgetState extends State<YourWidget> { StreamController<String> _refreshController; ... initState() { super... _refreshController = new StreamController<String>(); _loadingDeals(); } _loadingDeals() { _refreshController.add(""); } _handleRefresh(data) { if (x) _refreshController.add(""); } ... build(context) { ... return StreamBuilder( stream: _refreshController.stream, builder: (BuildContext context, AsyncSnapshot snapshot) { return RefreshIndicator( onRefresh: _handleRefresh(snapshot.data), ... ) } ); } } 变量不在您的组件状态,因此组件在更改时不会重新呈现。

将其置于组件状态,然后使用flag进行切换即可。

setState

答案 1 :(得分:0)

尝试以下示例,这可以帮助您解决问题。

let array_1 = [{
    'id': 1
  },
  {
    'id': 2
  },
  {
    'id': 3
  },
  {
    'id': 4
  },
  {
    'id': 5
  }
]
let array_2 = [{
    'name': 'Doe',
    'age': 45
  },
  {
    'name': 'John',
    'age': 35
  }
]

let finalArray = array_1.reduce(function(acc, curr, index) {
  acc.push({
    id: curr.id
  });

  if (array_2[index] !== undefined) {
    acc[index].name = array_2[index].name;
    acc[index].age = array_2[index].age
  }

  return acc;
}, []);

console.log(finalArray)