两个选择的按钮用同一个布局,显示相对应按钮的内容
时间: 2023-12-10 20:39:33 浏览: 32
您可以使用状态变量来控制显示哪个按钮的内容。您可以在按钮上设置一个 `onPress` 属性,该属性将触发状态变量的更改。然后,您可以使用条件语句来根据状态变量的值来决定哪个按钮的内容应该显示。
下面是一个示例代码:
```jsx
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
const Example = () => {
const [showButton1, setShowButton1] = useState(true);
const toggleButton = () => {
setShowButton1(!showButton1);
};
return (
<View>
<Button title={showButton1 ? 'Button 1' : 'Button 2'} onPress={toggleButton} />
{showButton1 ? (
<View>
<Text>Content for Button 1</Text>
</View>
) : (
<View>
<Text>Content for Button 2</Text>
</View>
)}
</View>
);
};
export default Example;
```
这个例子中,我们使用一个名为 `showButton1` 的状态变量来控制显示哪个按钮的内容。在 `toggleButton` 函数中,我们使用 `setShowButton1` 函数来将 `showButton1` 的值取反。在渲染函数中,我们使用条件语句来根据 `showButton1` 的值来决定哪个按钮的内容应该显示。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)