在 React Native Web 的情况下自定义 react-native-paper 的 TextInput Label
Customize TextInput Label of the react-native-paper in the case of React Native Web
我正在使用带有样式化组件的 React Native Web 和 React Native Paper 库。基本上我想自定义 TextInput 内部组件:Label 和 html input
问题是:
1)如何改变标签样式?例如。 width\size\color,等等?
2) 如何改变html input 样式?
我想设置 outline: none
以防止在浏览器的情况下蓝色边框显示在焦点上。
我知道在 native 的情况下我们没有 html
并且 native-web 转译它。
而且我无法理解如何 捕捉 嵌套标签组件以更改其样式。因为我想在未填充时显示 gray 标签,在填充时显示 violet 并且输入文本应为 black.
在 web 的情况下,它是微不足道的,但在 native 的情况下,我不知道如何处理它。
那有可能吗?
感谢您的帮助。这是代码示例
import React from 'react';
import {
View,
Platform,
} from 'react-native';
import {
TextInput as NativePaperInput,
withTheme,
} from 'react-native-paper';
import styled from 'styled-components/native';
const NativePaperInputThemed = withTheme(NativePaperInput);
export const TextInputStyled = styled(NativePaperInputThemed)`
${(props: any) => {
return `
outline: none; // doesn't work
input: { outline: none; } // doesn't work
& input: { outline: none; } // doesn't work
// Label change style ?
color: ${props.theme.theme10x.palette.typography.placeholder}; // doesn't work
border-color: '#f92a2a8a'; // doesn't work
height: 52px;
`;
}
}
`;
P.S。基本上连颜色和 fontFamily 都无法正常工作
有人试图手动更改标签样式,维护者回复:
You can pass fontSize via style prop. However it will affect both
label and input text. There is no way to change only one of them.
label={<Text style={{fontSize: 20}}>{t('PersonalDetailsYuvitalOrg:editInput.firstName')}</Text>}
您可以为标签道具传递一个组件。例如:
export const Input = styled(TextInput).attrs({
dense: true,
activeUnderlineColor: theme.colors.ui.blueDark,
label: <Text style={{fontSize: 50}}>My Custom Label</Text>
})`
width: 100%;
height: 50px;
font-size: 16px;
`
但是,我还没有找到一种方法来控制动画发生时的比例。
我正在使用带有样式化组件的 React Native Web 和 React Native Paper 库。基本上我想自定义 TextInput 内部组件:Label 和 html input
问题是:
1)如何改变标签样式?例如。 width\size\color,等等?
2) 如何改变html input 样式?
我想设置 outline: none
以防止在浏览器的情况下蓝色边框显示在焦点上。
我知道在 native 的情况下我们没有 html
并且 native-web 转译它。
而且我无法理解如何 捕捉 嵌套标签组件以更改其样式。因为我想在未填充时显示 gray 标签,在填充时显示 violet 并且输入文本应为 black. 在 web 的情况下,它是微不足道的,但在 native 的情况下,我不知道如何处理它。
那有可能吗?
感谢您的帮助。这是代码示例
import React from 'react';
import {
View,
Platform,
} from 'react-native';
import {
TextInput as NativePaperInput,
withTheme,
} from 'react-native-paper';
import styled from 'styled-components/native';
const NativePaperInputThemed = withTheme(NativePaperInput);
export const TextInputStyled = styled(NativePaperInputThemed)`
${(props: any) => {
return `
outline: none; // doesn't work
input: { outline: none; } // doesn't work
& input: { outline: none; } // doesn't work
// Label change style ?
color: ${props.theme.theme10x.palette.typography.placeholder}; // doesn't work
border-color: '#f92a2a8a'; // doesn't work
height: 52px;
`;
}
}
`;
P.S。基本上连颜色和 fontFamily 都无法正常工作
有人试图手动更改标签样式,维护者回复:
You can pass fontSize via style prop. However it will affect both label and input text. There is no way to change only one of them.
label={<Text style={{fontSize: 20}}>{t('PersonalDetailsYuvitalOrg:editInput.firstName')}</Text>}
您可以为标签道具传递一个组件。例如:
export const Input = styled(TextInput).attrs({
dense: true,
activeUnderlineColor: theme.colors.ui.blueDark,
label: <Text style={{fontSize: 50}}>My Custom Label</Text>
})`
width: 100%;
height: 50px;
font-size: 16px;
`
但是,我还没有找到一种方法来控制动画发生时的比例。