Как установить ширину представления, используя переменную, созданную в методе жизненного цикла в реагировать нативно?

Question

Я хочу настроить ширину на основе того, что происходит в ComponentWillMount.Я жестко закодировал значение внутри метода, а затем попытался использовать переменную внутри моего объекта стиля.Тем не менее, я получил ошибку «что-то» не определено.

class Alarm extends Component {

    componentWillMount() {
        // const batteryPercentage = 55;
        console.log('check');
        const something = 44;
    }
}

мой объект стиля выглядит следующим образом

const styles = {
    mainContainer: {
        backgroundColor: 'white',
        flex: 1,
        width: `${something}%`
    },
};

Как получить доступ к переменной 'нечто', которую я создал внутри componentWillMount?

Answer 1

Может ли вам понравиться это решение с компонентами стиля

    class Alarm extends Component {
      constructor(props) {
        super(props);

        this.state = {
          defaultWidth: 44;
        }
      }


      render() {
        return (
          <MainContainer width={this.state.defaultWidth} />
        );
      }
   }

И компонентом стиля

import styled from "styled-components"

const MainContainer= styled.View`
  width: ({ width }) => width,
`;

Answer 2

Сохраните вычисленное значение (something) в state, затем используйте нотацию массива в свойстве style, чтобы указать значение для width, например

Образец

<View style={[styles.mainContainer, { width: this.state.something }]} >
  ...
</View>

Вы можете удалить width из mainContainer или установить для него значение по умолчанию.

Надеюсь, это поможет!