React Native: вы пытались установить ключ на объект, который должен быть неизменным и был заморожен

Question 1

Я новичок в реагировании на родной язык и создаю свой первый.

В моем добавлении я решил динамически изменить backgroundColor моего приложения, для которого я сделал что-то вроде этого

let style = StyleSheet.flatten({
    upperRow: {
        display: "flex",
        flexDirection: "row",
        marginBottom: 5, 
        backgroundColor: "white"
    },
})

let {
    upperRow
} = style

И что-то вроде этого в componentWillReceiveProps

componentWillReceiveProps(nextProps) {

    if (this.props.coinPrice != nextProps.coinPrice ) {
       if (this.props.coinPrice > nextProps.coinPrice) {
        console.log("previous value is greater")
           //change background color to red
           upperRow["backgroundColor"] = "#ffe5e5"
           console.log(upperRow)
           //We 
       }
     }
    }

Это вызывает следующую ошибку

Вы попытались установить ключ backgroundColor со значением #ffe5e5 на объект, который должен быть неизменным и был заморожен.

Вопрос: Может ли кто-нибудь сказать мне, что здесь происходит не так?

Question 2

Что-то, что вы должны знать о Stylesheet:

Когда вы выполняете Stylesheet.flatten, он будет сглаживать массивы объектов стиля одним неизменным стильным объектом. Когда вы выполняете Stylesheet.create, он будет генерировать объект неизменяемого стиля.

Но почему это должно быть неизменным?

Обратитесь к документации, чтобы повысить производительность, неизменность объекта стиля позволит упростить связь между пользовательским интерфейсом и JS Нить. Другими словами, они будут просто использовать идентификаторы объектов стиля для связи друг с другом через собственный мост. Таким образом, объект не может быть мутирован.

Решение этой проблемы так же просто:

Когда вы выполняете Stylesheet.flatten, он будет сглаживать массивы объектов стиля один неизменяемый объект стиля. Обновление стилей динамически с использованием состояния.

Ниже приведен код, демонстрирующий, как это сделать:

class App extends React.Component {

  state = {
    clicked: false
  }

  handleOnPress = () => {
    this.setState(prevState => ({clicked: !prevState.clicked}))
  }

  render() {
    return (
      <View style={[styles.container, {backgroundColor: this.state.clicked ? "blue" : "red"}]}>
        <Button onPress={this.handleOnPress} title="click me" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Вот ссылка Snack Expo на код: documentation

Anh Pham · Answer 1 · 15 August 2018 в 17:04