为什么下拉边框颜色没有显示

Question

这里我使用 native-picker 作为下拉菜单。但 css 不适用于 picker 此处是图像

import { Picker } from '@react-native-picker/picker';

<Picker style = { styles.coloring}>
    <Picker.Item label="Java" value="java" />
    <Picker.Item label="JavaScript" value="js" />
</Picker>

const styles = StyleSheet.create({
 coloring: {
   borderWidth:1,
   borderColor: '#0095ff87',
   width: '100%',
   height :40,
 }

Answer 1

您可以将 Picker 放在视图中，并为视图设置如下边框：

import ReactDOM from "react-dom";
import React from "react";

const App: React.FunctionComponent = () => {
  const [state, setState] = React.useState("");
  const inputRef = React.useRef(null);

  const handleOnChange = (event: { target: { value: any } }) => {
    setState(event.target.value);
  };

  const handleSelect = (_: React.MouseEvent<HTMLElement>) => {
    if (inputRef) {
      inputRef.current.select();
    }
  };

  return (
    <div className="input-group mb-3">
      <input
        type="text"
        className="form-control"
        value={state}
        ref={inputRef}
        onChange={handleOnChange}
      />
      <button onClick={handleSelect}> Select</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));