Reactjs React Native：有没有办法使内联样式具有生成外部样式的状态？

如何将具有状态的外部样式与内联样式组合？我只想将所有样式放入样式模块

<View
  style={[
    styles.buttonAcceptDinamic,
    {
      backgroundColor: !this.state.micState ? null : 'rgba(255,255,255,.4)',
    },
  ]}>
  <Icon
    name={this.state.micState ? 'mic-off' : 'mic'}
    color="white"
    size={30}
  />
</View>;

;

（）此解决方案具有无状态的内联样式

---

编辑：代码正常工作。我只是想摆脱带有状态的内联样式，因为VSCode和错误镜头（VSCode扩展）给了我一个警告。

如果我正确理解了这个问题：

<View
  style={{
    ...styles.buttonAcceptDinamic,
    backgroundColor: !this.state.micState ? null : 'rgba(255,255,255,.4)',
  }}>
</View>

---

使用spread运算符似乎是最好的方法。

一个使用挂钩的示例实现了同样的效果，您的语法有一个问题：

 <Text style={[styles.paragraph, isValid ? {'color': 'red'} : "" ]}>

博览会：

import*as React from'React'；
从“react native”导入{文本、视图、样式表、TouchableOpacity}；
从“expo常量”导入常量；
//可以从本地文件导入
从“./components/AssetExample”导入AssetExample；
//或npm中可用的任何纯javascript模块
从“react native paper”导入{Card}；
导出默认函数App（）{
const[isValid，setValid]=React.useState（false）；
返回(
在编辑器中更改代码，并在手机上观看代码的更改！保存以获得可共享的url。
setValid（v=>！v）}>
改变状态
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
第段：{
差额：24，
尺码：18，
fontWeight:'粗体'，
textAlign:'中心'，
},
});

不，不是真的。为什么不呢？你有什么原因吗？是的，数组语法看起来更干净，是推荐的方法。作为参考，请查看github上的一些开源lib代码。实际上，我不同意“更干净”的部分，这是一件非常主观的事情。但我不知道这是推荐的方式。考虑到这一点吗？考虑到这一点，你必须结合多个样式表，使用数组符号，它只是<代码> [Stasel.Stuly1，Stasel.Stuly2，Stasel.Stuly3…]代码>，用扩展运算符：<代码> [{…SysList.SytLy1，.Studi.Stule2，…SysLe3…更多样式}] < /Cord>。当使用多个样式表时，真的很方便。在类似的情况下，你所说的“最好的方式”并不适用

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {

  const [isValid, setValid] = React.useState(false);

  return (
    <View style={styles.container}>
      <Text style={[styles.paragraph, isValid ? {'color': 'red'} : "" ]}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <TouchableOpacity onPress={() => setValid(v => !v)}>
          <Text>
            Change State
          </Text>
      </TouchableOpacity>
      <Card>
        <AssetExample />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});