Question

我的应用出现问题。我正在尝试使用状态更改子组件中的样式，但是很遗憾，我没有得到任何结果。我尝试过evrythig，但我不知道发生了什么，为什么样式根本没有改变

这是父母：

    constructor(props) {
    super(props);
    this.state = {
        number: 1,
        cords: [

        ],
        choosenCords: [

        ],
        style: {flex:1,flexDirection:'row',backgroundColor:'red'}
    };
} 
<View style={{ marginTop: 3 }}>
  <ListItem style={this.state.style} test={this.state.test} title={item.timestamp} context={item.longtitude + " " + item.latitude} click={this.getData.bind(this, item.longtitude, item.latitude, item.timestamp)} />
</View>

getData = async(x, y, z) => {

    let tempTab = []
        tempTab.push(x)
        tempTab.push(y)
        tempTab.push(z)
        const changeTest = this.state.test * (-1)
        await this.setState({
            choosenCords: [...this.state.choosenCords, tempTab],
            style: {flex:1,flexDirection:'row',backgroundColor:'blue'}
        })
}

} 该代码段表示onPress的样式更改。 “ choosenCords”正在改变，但“样式”没有改变。

这是孩子：

class ListItem extends Component {
constructor(props) {
    super(props);
    this.state = {
        test:this.props.test
    };
}

render() {
    return (
        <View style={this.props.style}>
            <Image
                source={require('../Images/gps.png')}
                style={{ borderWidth: 3, borderColor: '#7887AB', borderRadius: 50, marginLeft: 15, marginTop: 10 }}
            />
            <View style={{ flex: 1, flexDirection: "column", marginBottom: 15, marginLeft: 10 }}>
                <Text style={{ marginLeft: 10, fontSize: 16 }}>
                    {
                        "Timestamp: " + this.props.title
                    }
                </Text>
                <Text style={{ marginLeft: 15, fontSize: 15 }}>
                    {
                        "Cords:" + this.props.context
                    }
                </Text>
            </View>
            <TouchableHighlight
                underlayColor={'transparent'}
                onPress={
                    this.props.click
                }>
                <Image
                    source={
                        require('../Images/check.png')
                    }
                    style={{ marginRight: 20 }}
                />
            </TouchableHighlight>
        </View>
    );

}

有人可以帮我吗？

Answer 1

您必须这样做：

const customStyle= this.state.test ? styles.custom_1: styles.custom_2

return <View
      style={[ styles.anyStyle, customStyle]} 
    />;

定义您的自定义样式变量，根据state进行设置，然后将其用作元素的数组。

Answer 2

父组件的状态更改时，子组件不会自动更新。当父级发送新道具时，您需要手动更新子级组件的状态。

//in child component
componentDidUpdate(previousProps, previousState){
   if(previousProps.style !== this.props.style){
       //update child state here
       this.setState({style: this.props.style})
   }
}

现在，不要在子级中使用“ style = {this.props.style}”，而应使用“ style = {this.state.style}”

Answer 3

之所以发生这种情况，是因为当您更新状态时，子组件不会自动更新。您将在 componentWillReceiveProps（）方法中获得新的更新值。

您的 ListItem 类如下所示：

android:excludeFromRecents="true"

React-Native->无法使用状态更改样式

3 个答案: