我正在使用“react-native-paper”：“^4.12.5”和“react-native”：“0.70.4”
我想使用 react-native-paper 將左側的布局轉換為右側的布局。但是我發現了一個問題。我不知道如何將輸入和 TextInput 的占位符居中。我也想隱藏游標。
我曾嘗試使用 paper 組件的 style prop 注入“textAlign”，但似乎不起作用，并且 paper 的原生 props 不允許這種轉換。你知道我如何調整紙張組件，還是你認為我必須自己設計？
import * as React from 'react';
import {StyleSheet} from 'react-native';
import {TextInput} from 'react-native-paper';
import {useTheme} from 'react-native-paper';
type textInputProps = {
placeholder: string;
style: object;
};
const CustomInput = ({placeholder, style}: textInputProps) => {
const {colors} = useTheme();
return (
<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={(styles.custom, style)} // Here is the error!
// style={[styles.custom, style]} This is how to do it
theme={{roundness: 30}}
/>
);
};
const styles = StyleSheet.create({
custom: {
textAlign: 'center',
},
});
export default CustomInput;
- - - 編輯 - - -
正如 Vu 和 Nitin 所指出的，完全可以使用 style 屬性和 textAlign 屬性設定紙質 TextInput 的樣式以使游標居中。我的錯誤在于我傳遞樣式道具的方式，而不是樣式本身。
uj5u.com熱心網友回復：
發現語法錯誤：style={(styles.custom, style)}
textAlign仍然作業。
更改為：style={[styles.custom, style]}或style={{...styles.custom, ...style}}解決。
uj5u.com熱心網友回復：
首先要讓 TextInput 及其占位符居中，您必須修改 TextInput 樣式：
//從樣式中洗掉（）括號和樣式
<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={styles.custom}
theme={{roundness: 30}}
/>
or you can directly add inLine style
<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={{
textAlign: 'center'
}}
其次，要從 textInput 隱藏游標，您必須添加到 TextInput
caretHidden={真}
這看起來像：
<TextInput
mode="outlined"
placeholder={placeholder}
outlineColor={colors.border}
style={styles.custom}
theme={{roundness: 30}}
caretHidden={true}
/>
這就是你將如何達到你想要的結果
uj5u.com熱心網友回復：
也許您可以在樣式 css 上使用此代碼
textAlignHorizontal : 'right'轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/531163.html
標籤：反应式文本输入反应本机纸
下一篇：如何向本機導航標題添加高度