如何根据 onPress 状态更改代码？答案

【问题标题】：How to change code depending on onPress state?如何根据 onPress 状态更改代码？
【发布时间】：2021-12-28 13:34:06
【问题描述】：

我正在使用react native 和expo。

我想更改高度并在单击该框时添加一些Views。如何添加一些Views 对我来说似乎很困难。所以我尝试先改变 CSS 的高度。

  const [style, setStyle] = useState(true);

我将“样式”设置为使用useState。样式的默认值为'true'。

  <Header onPress={() => setStyle(!style)}>

我做到了，如果我点击标题框，setStyle 会变成样式的反转值。

在我想要应用更改的框的 css 代码上，我使用 props 来根据样式的状态进行更改。

  height: ${(props) => (props.style ? "60px" : "260px")}

当我 console.log 状态值时，只要我单击标题框，它就会正确地将 true 更改为 false 并将 false 更改为 true。但是没有相应地应用 CSS 样式。我怎样才能使它应用？

如果你能教我如何根据状态添加一些View，那将非常有帮助。

【问题讨论】：

标签： react-native react-hooks expo react-props use-state

【解决方案1】：

您没有包含足够的代码来轻松理解您的应用程序的结构，或者您究竟想要做什么。这是一个可以解决您的一些问题的示例……但您必须弄清楚它如何适合您的特定结构：

function App() {

    const [active, setActive] = useState(false);

    return <View>
        <TouchableOpacity onPress={() => setActive(!active)}>
            <Text>Press Me</Text>
        </TouchableOpacity>
        <View style={{height: active ? 260 : 60}}>
            {active && <Text>Content</Text>}
        </View>
    </View>;
}

【讨论】：

配置useState和onPress完全一样。但我在反应原生时使用样式化组件。 const Header = styled.TouchableOpacity` height: active? “60px”：“260px”`所以我所做的就是上面的。但它不起作用。