我在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变量中使用它,但同样不能正常工作。
有什么主意吗?
答案 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)