Thiết lập một biên giới cho phản ứng tự nhiên TextInput

Question

Sử dụng Phản ứng tự nhiên 0,26,

thành phần của tôi là một cái gì đó như thế này

const Search =() => { 
    return (
     <View style={styles.backgroundImage}> 
     <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/> 
     </View> 
    ) 
} 

Và phong cách của tôi:

const styles = StyleSheet.create({ 
    backgroundImage: { 
    flex : 1, 
    flexDirection: "column", 
    justifyContent: 'center', 
    alignItems: 'center' 
    }, 
    textInput: { 
    justifyContent: "center", 
    alignItems: "stretch", 
    borderRightWidth: 30, 
    borderLeftWidth: 30, 
    height: 50, 
    borderColor: "#FFFFFF", 
    } 
}) 

Những vấn đề mà tôi đang phải đối mặt là

1. Chiều rộng và lề phải của đường viền ft chiều rộng dường như không có bất kỳ hiệu ứng và văn bản giữ chỗ chỉ bắt đầu trên cạnh trái.
2. Nền của TextInput là "xám" giống với nền của Chế độ xem. Theo mặc định, tôi đã dự kiến ​​nó sẽ có màu trắng, (Cảm thấy trong suốt).
3. Với trình mô phỏng iOS cách hiển thị bàn phím, tôi muốn đặt returnKeyType và xem giao diện của bàn phím (và có một số mã trên onSubmitEditing và kiểm tra).

Ảnh chụp màn hình dưới đây:

Answer 1

1 Bạn không thể khai báo một biên giới cụ thể trực tiếp trên TextInput trừ multiline được kích hoạt (Ví dụ borderLeftWidth sẽ không làm việc trừ khi multiline={true} được kích hoạt nhưng borderWidth sẽ làm việc), nhưng bạn có thể chỉ cần bọc TextInput trong một View và cung cấp cho nó một đường viền.

inputContainer: { 
    borderLeftWidth: 4, 
    borderRightWidth: 4, 
    height: 70 
}, 
input: { 
    height: 70, 
    backgroundColor: '#ffffff', 
    paddingLeft: 15, 
    paddingRight: 15 
} 

2 Bạn cần khai báo backgroundColor cho TextInput.

3 Để làm cho bàn phím gốc hiển thị, bạn cần chuyển đến menu trình mô phỏng và ngắt kết nối phần cứng của bạn. Đi tới phần cứng -> Bàn phím -> Kết nối bàn phím phần cứng, tắt nó đi.