使用内联样式会导致性能问题并需要改进建议-React Native

Question

我正在获取观点的高度并将其保存到各州。并使用这些状态来动态设置FAB按钮的样式。每次安装组件时，内联样式都会导致性能问题。

我也有不同的样式表，但是我不知道如何在样式表中使用这些状态来克服此问题。

      <View
        style={styles.buttonContainer}
        onLayout={event => {
          var fabHeight = event.nativeEvent.layout.height;
          var fabWidth = event.nativeEvent.layout.width;
          this.setState({ fabHeight, fabWidth });
        }}
      >
        {/* Glass FAB Button */}
        <FAB
          icon={require('../assets/images/water-glass.png')}
          style={{
            backgroundColor: Colors.tintColor,
            position: 'absolute',
            bottom: this.state.fabHeight / 2,
          }}
          onPress={this.drinkWater}
          color={'white'}
        />
        {/* FAB Group Button */}
        <Portal>
          <FAB.Group
            open={this.state.open}
            icon={'menu'}
            actions={[
              {
                icon: require('../assets/images/juice.png'),
                label: 'Juice',
                onPress: () => this.drinkOther('juice'),
              },
              {
                icon: require('../assets/images/coffee.png'),
                label: 'Coffee',
                onPress: () => this.drinkOther('coffee'),
              },
            ]}
            onStateChange={({ open }) => this.setState({ open })}
            onPress={() => {
              this.setState({ open: !this.state.open });
            }}
            style={{
              paddingRight: this.state.fabWidth * 0.2,
              paddingBottom: this.state.fabHeight / 2 + this.state.adHeight - 16,
            }}
            color={'white'}
            theme={{ colors: { accent: Colors.tintColor } }}
          />
        </Portal>
      </View>