我是新来 react native 的,我如何修改我的代码来改变下拉列表的不透明度,以使文本‘我的文本’变为隐藏?

Example

以下是我的代码:

import React, { useState } from 'react';
import {
  Text,
  useColorScheme,
  View,
  Image,
} from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import DropDownPicker from 'react-native-dropdown-picker';

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {
      label: 'Option 1',
      value: 'option1',
    },
    {
      label: 'Option 2',
      value: 'option2',
    },
    {
      label: 'Option 3',
      value: 'option3',
    },
  ]);

  return (

      <View style={{
          backgroundColor: "white",
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          paddingHorizontal: 15
        }}>
      <Text>Selected Value: {value}</Text>
        <DropDownPicker
          open={open}
          value={value}
          items={items}
          setOpen={setOpen}
          setValue={setValue}
          setItems={setItems}
          placeholder="Select an option"
          containerStyle={{ width: 400, backgroundColor: "white"}}
          listItemLabelStyle={{ fontSize: 16 }}
          showArrowIcon={true}
          hideSelectedItemIcon={true}
          theme="LIGHT"
        />

        <Text>My text</Text>

      </View>

  );
}

export default App;

我已try 添加选项

listParentContainerStyle={{backgroundColor:  'rgba(255, 255, 255, 1)'}} 

但没有效果. 我试着按照这里的说明go 做,但没有效果:react-native-dropdown-picker listed items not showing properly (Overlay).

推荐答案

只需修改代码即可.您需要管理这Text个选项的不透明度:

{open ? <Text style={{ opacity: 0 }}>My text</Text> : <Text>My text</Text>}

或者,您也可以通过以下方式隐藏全部Text:

{!open && <Text>My text</Text>}

Here is the preview:
https://snack.expo.dev/HqW6LKFbN

React-native相关问答推荐

如何在Reaction Native中将身体分成三部分

如何渲染一个 svg 以在不同的窗口大小下动态地看起来相同?

Appcenter codepush 返回请求被阻止

无法设置文本输入参考

将值从一个 js 文件传递​​到 react native 中的另一个 js 文件:react native

React Native - React Native 架构

reactnavigation后退按钮的自定义后退导航

在 create-react-native-app 元素中突然看到错误Plugin/Preset files are not allowed to export objects, only functions

React - 类内的useContext

React Native - ScrollView 中的 ListView 分页?

从堆栈导航器中删除屏幕

ld:找不到-lFirebaseCore clang的库: error: linker command failed with exit code 1 (use -v to see invocation)

React Native + Jest EMFILE:too many open files error

require() 必须有一个字符串文字参数 React Native

如何在 react-native 中从 AsyncStorage 中删除元素

无法判断模块react-native-maps:找不到名称为 default的配置

使用来自另一个页面的 fetch 调用函数返回结果值

在 React Native ScrollView 中检测滚动结束,对齐页面

在 React Native 中将props传递给外部样式表?

使用expo react-native链接?