Question

有没有办法为React Native中的TextInput的fontStyle: 'italic'设置placeholder ？

查看here at the documentation似乎只能设置占位符和placeholderTextColor。

Answer 1

改进Daniel对更通用解决方案的回答

elev

用法：

0.1

Answer 2

您可以使用<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" width="600" height="450"> <defs> <marker id="blade1" markerUnits="userSpaceOnUse" orient="auto" overflow="visible"> <path style="fill:#ececf4" d="M 16.5,-1.556 13.947,-1.78 A 14,14 0 0 1 -13.947,-1.78 L -16.5,-1.556 0,200 Z" /> <path style="fill:none;stroke:#000" d="M 16.5,-1.556 13.947,-1.78 A 14,14 0 0 1 -13.947,-1.78 L -16.5,-1.556" /> </marker> <marker id="blade2" markerUnits="userSpaceOnUse" orient="auto" overflow="visible"> <path style="fill:#ececf4" d="M 16.5,0.507 13.694,-0.089 A 14,14 0 0 1 -13.694,-0.089 L -16.5,0.507 0,90 Z" /> <path style="fill:none;stroke:#000" d="M 16.5,0.507 13.694,-0.089 A 14,14 0 0 1 -13.694,-0.089 L -16.5,0.507" /> </marker> <path id="plate" d="M -9.689,-10.392 C -4.782 -7.56 4.782 -7.56 9.689,-10.392 A 12,12 0 1 1 9.689,10.392 C 4.782 7.56 -4.782 7.56 -9.689,10.392 A 12,12 0 1 1 -9.689,-10.392 Z" /> <marker id="link1" style="stroke:#000" markerUnits="userSpaceOnUse" orient="auto" overflow="visible"> <use xlink:href="#plate" style="fill:#ddd" /> <circle id="pin" style="fill:#888;stroke:#000" cx="15.689" cy="0" r="4" /> <use xlink:href="#pin" x="-31.378" /> </marker> <marker id="link2" style="stroke:#000" markerUnits="userSpaceOnUse" orient="auto" overflow="visible"> <use xlink:href="#plate" style="fill:#bbb" /> </marker> <g id="center1"> <circle r="80" cx="250" cy="300" /> <g id="cq"> <circle r="10" cx="345" cy="265.42" /> <path d="M 252.984,200.049 A 100,100 0 0 1 324.557,233.367 25,25 0 0 0 361.957,200.182 150,150 0 0 0 254.883,150.086 25,25 0 0 0 252.984,200.049 Z" /> </g> <use xlink:href="#cq" transform="rotate(90 250,300)" /> <use xlink:href="#cq" transform="rotate(180 250,300)" /> <use xlink:href="#cq" transform="rotate(270 250,300)" /> </g> <mask id="m1"> <rect fill="white" x="50" y="100" width="400" height="400" /> <use xlink:href="#center1" fill="black" /> </mask> <path id="center2" d="M 647.75 277.2 L 642.04 279.05 L 643.04 282.13 A 20 20 0 0 0 633.31 292.96 L 630.13 292.28 L 628.88 298.15 L 632.06 298.83 A 20 20 0 0 0 636.55 312.68 L 634.38 315.08 L 638.84 319.1 L 641.01 316.69 A 20 20 0 0 0 655.25 319.73 L 656.25 322.8 L 661.96 320.95 L 660.96 317.87 A 20 20 0 0 0 670.7 307.04 L 673.87 307.72 L 675.12 301.85 L 671.94 301.17 A 20 20 0 0 0 667.45 287.32 L 669.62 284.92 L 665.16 280.9 L 662.99 283.31 A 20 20 0 0 0 648.75 280.27 L 647.75 277.2 z" /> <mask id="m2"> <rect fill="white" x="572" y="220" width="160" height="160" /> <use xlink:href="#center2" fill="black" /> </mask> </defs> <g mask="url(#m1)"> <path style="fill:none;marker-mid:url(#blade1)" d="M 430,300 427.27,331.26 419.14,361.56 405.88,390 387.89,415.7 365.7,437.89 340,455.88 311.56,469.14 281.26,477.27 250,480 218.74,477.27 188.44,469.14 160,455.88 134.3,437.89 112.11,415.7 94.12,390 80.86,361.56 72.73,331.26 70,300 72.73,268.74 80.86,238.44 94.12,210 112.11,184.3 134.3,162.11 160,144.12 188.44,130.86 218.74,122.73 250,120 281.26,122.73 311.56,130.86 340,144.12 365.7,162.11 387.89,184.3 405.88,210 419.14,238.44 427.27,268.74 430,300 427.27,331.26" /> </g> <use xlink:href="#center1" style="fill:none;stroke:#000" /> <g mask="url(#m2)"> <path style="fill:none;marker-mid:url(#blade2)" d="M 578.19,315.69 V 284.31 L 590.95,255.65 614.27,234.65 644.11,224.95 675.32,228.23 702.49,243.92 720.94,269.31 727.46,300 720.94,330.69 702.49,356.08 675.32,371.77 644.11,375.05 614.27,365.35 590.95,344.35 578.19,315.69 V 284.31"/> </g> <use xlink:href="#center2" style="fill:none;stroke:#000" /> <path style="fill:none;marker-mid:url(#link2)" d="M 281.26 477.27 L 265.63 478.63 C 250 480 218.74 477.27 203.59 473.21 S 160 455.88 147.15 446.89 112.11 415.7 103.11 402.85 80.86 361.56 76.79 346.41 70 300 71.37 284.37 80.86 238.44 87.49 224.22 112.11 184.3 123.21 173.21 160 144.12 174.22 137.49 218.74 122.73 234.37 121.37 281.26 122.73 296.41 126.79 341.88 138.97 357.03 143.03 402.5 155.2 417.66 159.26 463.13 171.43 478.28 175.49 523.75 187.66 538.91 191.72 584.38 203.89 599.54 207.95 645.01 220.12 660.16 224.18 702.49 243.92 711.71 256.61 727.46 300 724.2 315.35 702.49 356.08 688.91 363.92 645.01 379.88 629.85 383.94 584.38 396.11 569.22 400.17 523.75 412.34 508.6 416.4 463.13 428.57 447.97 432.63 402.5 444.8 387.35 448.86 341.88 461.03 326.72 465.09 281.26 477.27 265.63 478.63 L 250 480" /> <path style="fill:none;marker-mid:url(#link1)" d="M 311.56 469.14 L 296.41 473.21 C 281.26 477.27 250 480 234.37 478.63 S 188.44 469.14 174.22 462.51 134.3 437.89 123.21 426.79 94.12 390 87.49 375.78 72.73 331.26 71.37 315.63 72.73 268.74 76.79 253.59 94.12 210 103.11 197.15 134.3 162.11 147.15 153.11 188.44 130.86 203.59 126.79 250 120 265.63 121.37 311.56 130.86 326.72 134.91 372.19 147.08 387.35 151.14 432.82 163.31 447.97 167.37 493.44 179.54 508.6 183.6 554.07 195.77 569.22 199.83 614.69 212 629.85 216.06 675.32 228.23 688.91 236.08 720.94 269.31 724.2 284.65 720.94 330.69 711.71 343.39 675.32 371.77 660.16 375.82 614.69 388 599.54 392.05 554.07 404.23 538.91 408.28 493.44 420.46 478.28 424.51 432.82 436.69 417.66 440.74 372.19 452.92 357.03 456.97 311.56 469.14 296.41 473.21 L 281.26 477.27" /> </svg>道具设置占位符颜色。

placeholderTextColor

Answer 3

您可以自己构建此功能。当输入为空时显示占位符，因此您可以检查状态并相应地更改fontStyle：

<TextInput
  onChangeText={txt => this.setState({enteredText: txt})}
  fontStyle={this.state.enteredText.length == 0 ? 'italic' : 'normal'}
  style={style.input} />

出于某种原因，这似乎不适用于fontFamily = System。所以你必须明确指定fontFamily。

Answer 4

TextInput的Content和placeHolder使用通用样式，因此您可以为placeHolder设置fontWeight和fontSize。另一方面，您可以为placeholderTextColor

设置属性TextInput

Answer 5

您还可以使用无状态组件。

这是我的解决方案：

首先，在我的屏幕组件中......

import React from 'react';
import { View } from 'react-native';
import MyWrappedComponent from '../wherever/your/components/are/MyWrappedComponent';

class ScreenComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myText: null,
    };
    this.handleTextOnChange = this.handleTextOnChange.bind(this);
  }

  handleTextOnChange(myText) {
    this.setState({ myText });
  }

  render() {
    const { myText } = this.state

  return (
    <View>
      <MyWrappedComponent            
        value={myText}
        placeholder="My Placeholder Text"
        onChangeText={this.handleTextOnChange}
        style={styles.someStyle}
        placeholderStyle={style.somePlaceholderStyle}
      />
    </View>
  )
}

然后，在我的包装组件中......

import React from 'react';
import { TextInput } from 'react-native-gesture-handler';

const MyWrappedComponent = ({
  style,
  placeholderStyle,
  value,
  ...rest
}) => (
  <TextInput
    {...rest}
    style={!value ? [style, placeholderStyle] : style}
  />
);

export default MyWrappedComponent;

Answer 6

如果您只想调整占位符的位置，则可以将a包裹在其中并在其中添加样式：

npm install --save ckeditor

它将允许占位符对齐居中，因为有时“ alignContent”，“ alignItems”，“ justifyContent”可能不起作用。另外：

<View style={{
    flex: 0.3,
    alignContent: "center",
    justifyContent: "center",
    alignSelf: "center"
    }}>

为边框线设置样式（上面的边框删除了来自“ react-native-elements”的所有边框）。

Answer 7

我发现，您分配给文本输入的样式也将应用于占位符文本。可以为占位符文本设置的唯一属性是颜色，其他样式将从文本输入样式继承。

Answer 8

看看占位符：

TextInput占位符将继承TextInput的样式。因此，我们可以在TextInput样式中设置样式。有时我们需要使用其他颜色的占位符，因此我们可以轻松使用placeholderTextColor道具进行自定义。

如何在React Native中更改TextInput占位符的样式？

8 个答案: