反应本地纸文字输入黑条
反应本地纸文字输入黑条
提问于 2021-12-16 16:05:59
我目前正在开发一个跨平台的React本地应用程序。(非博览会)
我使用的方法如下：
"dependencies": {
"@react-native-async-storage/async-storage": "^1.15.13",
"@react-navigation/core": "^6.1.0",
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.4",
"@react-navigation/routers": "^6.1.0",
"@reduxjs/toolkit": "^1.6.2",
"@testing-library/react-native": "^8.0.0",
"axios": "^0.23.0",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-dotenv": "^3.2.0",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-slider-box": "^1.1.10",
"react-native-keychain": "^8.0.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^2.1.5",
"react-native-nfc-manager": "^3.11.0",
"react-native-paper": "^4.10.1",
"react-native-paper-dropdown": "^1.0.7",
"react-native-reanimated": "^2.3.0",
"react-native-responsive-fontsize": "^0.5.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.8.0",
"react-native-select-dropdown": "^1.4.0",
"react-native-skeleton-content": "^1.0.23",
"react-native-svg": "^12.1.1",
"react-native-svg-transformer": "^0.14.3",
"react-native-vector-icons": "^8.1.0",
"react-native-video": "^5.2.0-alpha1",
"react-redux": "^7.2.5",
"reconnect.js": "^1.1.3",
"redux": "^4.1.1",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0"
},当我从react本地文件创建多行文本输入时，会得到以下内容：
有什么我能做的吗？这是我的密码：
<TextInput
testID={'contactMessage'}
label={'Message'}
placeholderTextColor={colors.placeholder}
style={[styles.input, { maxHeight: height * 0.25 }]}
multiline={true}
numberOfLines={5}
maxLength={maxLength}
value={message}
onChange={e => {
setMessage(e.nativeEvent.text)
setMessageCount(e.nativeEvent.text.length)
}}
>在我的StyleSheet中：
input: {
backgroundColor: colors.surface,
color: colors.accent,
marginTop: actuatedNormalize(16),
width: '100%',
},Stack Overflow用户
回答已采纳
发布于 2021-12-16 18:05:39
import React from 'react';
import {
StyleSheet,
SafeAreaView,
StatusBar,
View,
Dimensions,
} from 'react-native';
import {TextInput} from 'react-native-paper';
const {width, height} = Dimensions.get('window');
const App = props => {
return (
<SafeAreaView style={styles.container}>
<View style={{flex: 1}}>
<TextInput
testID={'contactMessage'}
placeholder="Hello hi"
placeholderTextColor="white"
style={[styles.input, {height: height * 0.25}]}
multiline={true}
numberOfLines={5}
selectionColor="white"
activeOutlineColor="red"
mode="outlined"
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
marginHorizontal: 16,
},
input: {
margin: 12,
color: 'white',
backgroundColor: 'green',
},
});
export default App;试试这个例子。默认情况下，TextInput将模式用作“平面”。所以当您查看源代码时
{!isAndroid && multiline && (
// Workaround for: https://github.com/callstack/react-native-paper/issues/2799
// Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.
<View
testID="patch-container"
pointerEvents="none"
style={[
StyleSheet.absoluteFill,
dense ? styles.densePatchContainer : styles.patchContainer,
{
backgroundColor: containerStyle.backgroundColor,
left: paddingLeft,
right: paddingRight,
},
]}
/>
)}他们增加了一些默认高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70382161
复制相关文章
相似问题
腾讯云开发者
