blocks|key|13585|text|当被问到这一点时，没有一种方法可以在本地完成，但是这将根据this拉取请求在下一次同步时添加。这是拉取请求的最后一条评论--“在内部登陆，将在下一次同步时退出”。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|13586|添加后，您将能够执行以下操作|13587|<TextInput+secureTextEntry={true}+style={styles.default}+value="abc"+/>|code-block|syntax|javascript|13588|refs|13589|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/facebook/react-native/pull/265|1|https://github.com/ide/react-native/commit/326e0eec92e24ee75592b62786a553bac1077664#diff-0a29ef46668cfd8874ceda0c7fc6701eR249^0|T|4|0|0|0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

When this was asked there wasn't a way to do it natively, however this will be added on the next sync according to <a href="https://github.com/facebook/react-native/pull/265">this</a> pull request.
Here is the last comment on the pull request - "Landed internally, will be out on the next sync"

When it is added you will be able to do something like this

<pre><code>&lt;TextInput secureTextEntry={true} style={styles.default} value="abc" /&gt;
</code></pre>

<a href="https://github.com/ide/react-native/commit/326e0eec92e24ee75592b62786a553bac1077664#diff-0a29ef46668cfd8874ceda0c7fc6701eR249">refs</a>

blocks|key|13850|text|只需将以下行添加到<TextInput>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|13851|secureTextEntry={true}|code-block|syntax|javascript|13852|entityMap^0|9|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Just add the line below to the <code>&lt;TextInput&gt;</code>

<pre><code>secureTextEntry={true}
</code></pre>

blocks|key|13684|text|添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|13685|secureTextEntry={true}|code-block|syntax|javascript|13686|或者只是|13687|secureTextEntry+|13688|属性添加到TextInput中。|13689|工作示例：|13690|<TextInput+style={styles.input}
+++++++++++placeholder="Password"
+++++++++++placeholderTextColor="#9a73ef"
+++++++++++returnKeyType='go'
+++++++++++secureTextEntry
+++++++++++autoCorrect={false}
/>|13691|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Add 

<pre><code>secureTextEntry={true}
</code></pre>

or just

<pre><code>secureTextEntry 
</code></pre>

property in your TextInput.

Working Example:

<pre><code>&lt;TextInput style={styles.input}
 placeholder="Password"
 placeholderTextColor="#9a73ef"
 returnKeyType='go'
 secureTextEntry
 autoCorrect={false}
/&gt;
</code></pre>

blocks|key|13654|text|我不得不补充一句：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|13655|secureTextEntry={true}|code-block|syntax|javascript|13656|随同|13657|password={true}|13658|截至0.55|13659|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I had to add:

<pre><code>secureTextEntry={true}
</code></pre>

Along with 

<pre><code>password={true}
</code></pre>

As of 0.55

blocks|key|13741|text|TextInput必须包含secureTextEntry={true}，请注意React的文档声明您不能同时使用multiline={true}，因为不支持该组合。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|13742|您还可以设置textContentType={'password'}以允许字段从存储在手机上的钥匙链中检索凭据，如果您的手机上有生物识别输入以快速插入凭据，这是一种输入凭据的替代方法。例如iPhone+X上的FaceId或其他iPhone机型和安卓系统上的指纹触摸输入。|13743|+<TextInput+value={this.state.password}+textContentType={'password'}+multiline={false}+secureTextEntry={true}+onChangeText={(text)+=>+{+this._savePassword(text);+this.setState({+password:+text+});+}}+style={styles.input}+placeholder='Github+password'+/>|code-block|syntax|javascript|13744|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

An TextInput must include secureTextEntry={true}, note that the docs of React state that you must not use multiline={true} at the same time, as that combination is not supported. 

You can also set textContentType={'password'} to allow the field to retrieve credentials from the keychain stored on your mobile, an alternative way to enter credentials if you got biometric input on your mobile to quickly insert credentials. Such as FaceId on iPhone X or fingerprint touch input on other iPhone models and Android. 

<pre><code> &lt;TextInput value={this.state.password} textContentType={'password'} multiline={false} secureTextEntry={true} onChangeText={(text) =&gt; { this._savePassword(text); this.setState({ password: text }); }} style={styles.input} placeholder='Github password' /&gt;
</code></pre>

blocks|key|4521322|text|一点加分：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4521323|version+=+RN+0.57.7

secureTextEntry={true}|code-block|syntax|javascript|4521324|当keyboardType为"phone-pad"或"email-address"时不起作用|offset|length|style|CODE|4521325|entityMap^0|0|0|1|C|E|B|Q|F|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

A little plus:

<pre><code>version = RN 0.57.7

secureTextEntry={true}
</code></pre>

does not work when the <code>keyboardType</code> was <code>"phone-pad"</code> or <code>"email-address"</code>

blocks|key|13616|text|您可以在官网获取示例和示例代码，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|13617|<TextInput+password={true}+style={styles.default}+value="abc"+/>|code-block|syntax|javascript|13618|参考：http://facebook.github.io/react-native/docs/textinput.html|offset|length|13619|entityMap|0|LINK|mutability|MUTABLE|url|http://facebook.github.io/react-native/docs/textinput.html^0|0|0|3|1M|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can get the example and sample code at the official site, as following:

<pre><code>&lt;TextInput password={true} style={styles.default} value="abc" /&gt;
</code></pre>

Reference: <a href="http://facebook.github.io/react-native/docs/textinput.html" rel="nofollow">http://facebook.github.io/react-native/docs/textinput.html</a>

blocks|key|4521410|text|<TextInput
++placeholderTextColor={colors.Greydark}
++placeholder={'Enter+Password'}
++secureTextEntry={true}+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4521411|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;TextInput
 placeholderTextColor={colors.Greydark}
 placeholder={'Enter Password'}
 secureTextEntry={true} /&gt;
</code></pre>

blocks|key|4521354|text|如果您添加了secureTextEntry={true}但没有工作，那么请检查multiline={true}属性，因为如果是真的，secureTextEntry就不能工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4521355|entityMap^0|6|M|13|G|1U|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

If you added <code>secureTextEntry={true}</code> but did not work then check the <code>multiline={true}</code> prop, because if it is true, <code>secureTextEntry</code> does not work.

blocks|key|13913|text|<TextInput+
+++secureTextEntry+
+++placeholder="password"+placeholderTextColor="#297542"+
+++autoCorrect={false}+style={mystyles.inputStylee}+
/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|13914|您可以简单地将secureTextEntry属性添加到TextInput中并省略它的值。默认情况下，它设置为true。要将其设置为false，请执行此secureTextEntry={false}|unstyled|offset|length|style|CODE|13915|entityMap^0|0|7|F|23|N|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]|$G|Q|H|R|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|S|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>&lt;TextInput 
 secureTextEntry 
 placeholder=&quot;password&quot; placeholderTextColor=&quot;#297542&quot; 
 autoCorrect={false} style={mystyles.inputStylee} 
/&gt;
</code></pre>
You can simply add the <code>secureTextEntry</code> prop to TextInput and omit its value. By default, it is set to true. To make it to false do this <code>secureTextEntry={false}</code>

blocks|key|4521422|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4521423|+<TextInput
++++++++placeholder="Password"
++++++++secureTextEntry={true}
++++++++style={styles.input}
++++++++onChangeText={setPassword}
++++++++value={password}
++++++/>|code-block|syntax|javascript|4521424|4521425|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;TextInput
 placeholder="Password"
 secureTextEntry={true}
 style={styles.input}
 onChangeText={setPassword}
 value={password}
 /&gt;</code></pre>
</div>
</div>

I have a TextInput. Instead of showing the actual text entered, when the user enters text I want it to show the password dots / asterisks (<code>****</code>) you typically see in apps when typing a password. How can I do this?
<pre><code>&lt;TextInput
 style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
 onChangeText={(text) =&gt; this.setState({input: text})}
/&gt;
</code></pre>

How do you style a TextInput in react native for password input

我有一台TextInput。当用户输入文本时，我希望它显示您通常在应用程序中输入密码时看到的密码点/星号(****)，而不是显示实际输入的文本。我该怎么做呢？<TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} onChangeText={(text) => this.setState({input: te

问如何在用于密码输入的react原生TextInput中设置样式
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在用于密码输入的react原生TextInput中设置样式EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在用于密码输入的react原生TextInput中设置样式
EN