Làm thế nào tôi có thể đặt một biểu tượng bên trong TextInput trong React Native?

Question

Tôi đang nghĩ đến việc có một cái gì đó như thế này https://android-arsenal.com/details/1/3941 nơi bạn có biểu tượng mà bạn nhấn để hiển thị mật khẩu dưới dạng bản rõ, chứ không phải là dấu chấm. Tuy nhiên, tôi không thể tìm thấy bất kỳ thành phần tùy chỉnh nào có thể giúp tôi.

Tôi không muốn dành quá nhiều thời gian vào một tính năng nhỏ như vậy, vì vậy tôi hỏi mà không thử bất cứ điều gì: Có một thành phần tùy chỉnh mà tôi đã bỏ qua? Nếu không, có cách nào đơn giản để thêm trẻ em vào TextInput không? Hoặc tôi chỉ nên có TextInput và Touchable cạnh nhau?

Answer 1

Bạn có thể sử dụng mô-đun này là dễ sử dụng: https://github.com/halilb/react-native-textinput-effects

Answer 2

Ở đây bạn có một ví dụ tôi lấy từ dự án của riêng tôi, tôi đã chỉ cần loại bỏ những gì tôi nghĩ rằng chúng tôi didnt cần cho ví dụ.

import React, { Component } from 'react'; 
import { 
    Text, 
    TouchableOpacity, 
    View, 
    StyleSheet, 
    Dimensions, 
    Image 
} from 'react-native'; 

class YourComponent extends Component { 
    constructor(props) { 
    super(props); 

    this._makeYourEffectHere = this._makeYourEffectHere.bind(this); 

    this.state = { 
     showPassword: false, 
     image: '../statics/showingPassImage.png' 
    } 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <TouchableOpacity style={styles.button} onPress={this._makeYourEffectHere}> 
      <Text>button</Text> 
      <Image style={styles.image} source={require(this.state.image)}></Image> 
     </TouchableOpacity> 
     <TextInput password={this.state.showPassword} style={styles.input} value="abc" /> 
     </View> 
    ); 
    } 

    _makeYourEffectHere() { 
    var png = this.state.showPassword ? '../statics/showingPassImage.png' : '../statics/hidingPassImage.png'; 
    this.setState({showPassword: !this.state.showPassword, image: png}); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'white', 
    justifyContent: 'center', 
    flexDirection: 'column', 
    alignItems: 'center', 
    }, 
    button: { 
    width: Dimensions.get('window').width * 0.94, 
    height: 40, 
    backgroundColor: '#3b5998', 
    marginTop: Dimensions.get('window').width * 0.03, 
    justifyContent: 'center', 
    borderRadius: Dimensions.get('window').width * 0.012 
    }, 
    image: { 
    width: 25, 
    height: 25, 
    position: 'absolute', 
    left: 7, 
    bottom: 7 
    }, 
    input: { 
    width: Dimensions.get('window').width * 0.94, 
    height: 30 
    } 
}); 

module.exports = YourComponent; 

Tôi hy vọng Nó sẽ giúp bạn.

Hãy cho tôi biết nếu nó hữu ích.

Answer 3

Bạn có thể bọc TextInput của mình trong Chế độ xem.

<View><TextInput/><Icon/><View>

và tự động tính toán chiều rộng, nếu bạn muốn thêm biểu tượng, iconWidth = 0,05 * viewWidth, textInputWidth = 0,95 * viewWidth, nếu không textInputwWidth = viewWidth. Xem và TextInput BackgroundColor là màu trắng. Hack nhỏ)

Answer 4

Bạn có thể sử dụng sự kết hợp của View, Icon và TextInput như vậy:

<View style={styles.searchSection}> 
    <Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/> 
    <TextInput 
     style={styles.input} 
     placeholder="User Nickname" 
     onChangeText={(searchString) => {this.setState({searchString})}} 
     underlineColorAndroid="transparent" 
    /> 
</View> 

và sử dụng flex-hướng cho việc tạo kiểu

searchSection: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#fff', 
}, 
searchIcon: { 
    padding: 10, 
}, 
input: { 
    flex: 1, 
    paddingTop: 10, 
    paddingRight: 10, 
    paddingBottom: 10, 
    paddingLeft: 0, 
    backgroundColor: '#fff', 
    color: '#424242', 
}, 

Icons được lấy từ "phản ứng-native- vector-icons "

Answer 5

Về cơ bản, bạn không thể đặt biểu tượng bên trong textInput nhưng bạn có thể giả mạo nó bằng cách gói nó bên trong khung nhìn và thiết lập một số quy tắc tạo kiểu đơn giản.

Dưới đây là cách hoạt động:

• đưa cả Biểu tượng và TextInput bên trong một mẹ Xem
• thiết flexDirection của phụ huynh để 'hàng' mà sẽ align trẻ em cạnh nhau
• tặng TextInput flex 1 nên phải mất toàn bộ chiều rộng của phụ huynh Xem
• cho mẹ Xem một borderBottomWidth và đẩy biên giới này xuống với paddingBottom (điều này sẽ làm cho nó xuất hiện như một textinput thường xuyên với một borderBottom)
  • (hoặc bạn có thể thêm bất kỳ phong cách khác tùy thuộc vào cách bạn muốn nó trông)

Code:

<View style={styles.passwordContainer}> 
    <TextInput 
    style={styles.inputStyle} 
     autoCorrect={false} 
     secureTextEntry 
     placeholder="Password" 
     value={this.state.password} 
     onChangeText={this.onPasswordEntry} 
    /> 
    <Icon 
    name='what_ever_icon_you_want' 
    color='#000' 
    size={14} 
    /> 
</View> 

Kiểu:

passwordContainer: { 
    flexDirection: 'row', 
    borderBottomWidth: 1, 
    borderColor: '#000', 
    paddingBottom: 10, 
}, 
inputStyle: { 
    flex: 1, 
}, 

(Lưu ý: biểu tượng là bên dưới TextInput để nó xuất hiện trên xa bên phải, nếu nó nằm trên TextInput nó sẽ xuất hiện trên bên trái.)