视频链接:视频
正如您从一开始看到的奇怪行为,您看不到占位符文本。
可以正确看到它,而不是在与上面相同的输入字段中但在视图中找不到。
你能告诉我哪里错了吗?
您也可以使用 android expo 模拟器尝试一下: https://snack.expo.dev/exQQvm0ve
代码:
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput, Badge, Button } from 'react-native-paper';
export default function App() {
const [value, setValue] = React.useState('');
const [dishs, setDishs] = React.useState([]);
const isDark = false;
const checkNumber = (array, numb) => {
return array.findIndex(({ dish }) => dish === parseInt(numb));
};
const addNumber = (numb) => {
const found = checkNumber(dishs, numb);
if (found === -1) setDishs([...dishs, { dish: parseInt(numb), times: 1 }]);
else {
const clone = JSON.parse(JSON.stringify(dishs));
clone[found].times++;
setDishs(clone);
}
};
return (
<View style={{ flex: 1, padding: 46 }}>
<TextInput
dense
mode="outlined"
label="Dish"
placeholder="Dish"
keyboardType="phone-pad"
maxLength={3}
value={value}
onChangeText={setValue}
onSubmitEditing={({ nativeEvent: { text } }) => {
setValue('');
if (text === '' || isNaN(text)) return;
addNumber(text);
}}
theme={{
colors: {
placeholder: isDark ? '#FFFFFF' : '#000',
text: '#1E90FF',
primary: '#1E90FF',
background: isDark ? '#1B1A23' : '#EFEFEF',
},
}}
/>
<View
style={{
marginTop: 20,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<TextInput
dense
mode="outlined"
label="Dish"
placeholder="Dish"
keyboardType="phone-pad"
maxLength={3}
value={value}
onChangeText={setValue}
onSubmitEditing={({ nativeEvent: { text } }) => {
setValue('');
if (text === '' || isNaN(text)) return;
addNumber(text);
}}
theme={{
colors: {
placeholder: isDark ? '#FFFFFF' : '#000',
text: '#1E90FF',
primary: '#1E90FF',
background: isDark ? '#1B1A23' : '#EFEFEF',
},
}}
/>
<Button
style={{
backgroundColor: '#1E90FF',
width: 160,
height: 40,
}}
mode="contained">
Send
</Button>
</View>
</View>
);
}
遇到同样的问题,只需删除占位符道具即可工作,仅保留标签。
<TextInput
dense
mode="outlined"
label="Dish"
keyboardType="phone-pad"
maxLength={3}
value={value}
onChangeText={setValue}
onSubmitEditing={({ nativeEvent: { text } }) => {
setValue('');
if (text === '' || isNaN(text)) return;
addNumber(text);
}}
theme={{
colors: {
placeholder: isDark ? '#FFFFFF' : '#000',
text: '#1E90FF',
primary: '#1E90FF',
background: isDark ? '#1B1A23' : '#EFEFEF',
},
}}
/>