【发布时间】：2021-01-26 11:25:10
【问题描述】：
我尝试使用来自link 的 KeyboardAwareScrollView，但它不起作用，不知道为什么。 我还尝试使用“KeyboardAvoidingView”，但没有帮助。 我真的不明白我的问题出在哪里，并且很乐意获得有关该主题的指导或帮助，因为每次键盘都会隐藏文本框并且我不明白如何处理这个问题。
这是我的例子：
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
function NetuneyDigum() {
const navigation = useNavigation();
const [currentTime, setCurrentTime] = useState('');
const [isSelected, setSelection] = useState(false);
const [selectedValue, setSelectedValue] = useState('1');
return (
<>
<View
style={{
flex: 1,
alignItems: 'center',
backgroundColor: '#cbced4',
}}
>
<View
style={{
paddingTop: 30,
flexDirection: 'row',
paddingRight: 180,
}}
>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
left: 58,
}}
>
<Text
style={{
fontWeight: 'bold',
fontSize: 18,
color: 'black',
}}
>
שעת דיגום:
</Text>
</View>
<View
style={{
width: 150,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
left: 80,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}
>
<Text
style={{
fontWeight: 'bold',
fontSize: 20,
color: 'black',
}}
>
{currentTime}
</Text>
</View>
<TouchableOpacity
onPress={() => {
const time = moment().format('HH:mm');
setCurrentTime(time);
}}
style={{
height: 60,
width: 60,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#275d9f',
left: 100,
}}
>
<Icon size={40} color="white" name="time-outline" />
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'row',
alignSelf: 'flex-start',
// alignItems: 'flex-start',
top: 40,
left: 10,
}}
>
<CheckBox
value={isSelected}
onValueChange={setSelection}
style={styles.checkbox}
tintColors={{ true: 'blue', false: 'black' }}
/>
<Text style={styles.label}>שאיבת חוץ</Text>
</View>
<View
style={{
alignSelf: 'center',
backgroundColor: '#275d9f',
height: 50,
width: 400,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
top: 50,
}}
>
<Text style={styles.Notice}>הערות</Text>
</View>
<KeyboardAwareScrollView
behaviour="position"
style={styles.container}
enabled
>
<TextInput
style={{
top: 50,
alignSelf: 'center',
height: 200,
width: 400,
backgroundColor: 'white',
borderWidth: 2,
borderRadius: 5,
fontSize: 18,
}}
placeholder="כתוב כאן.."
// onChangeText={(text) => onChangeText(text)}
// value={value5}
/>
</KeyboardAwareScrollView>
<View
style={{
flexDirection: 'row',
alignItems: 'flex-end',
alignSelf: 'flex-start',
bottom: 70,
// paddingTop: 50,
}}
>
<Text style={styles.label}>מעבדה:</Text>
<View
style={{
borderWidth: 2,
borderRadius: 5,
backgroundColor: 'white',
left: 15,
}}
>
<Picker
mode="dropdown"
selectedValue={selectedValue}
style={{
placeholderTextColor: 'black',
height: 50,
width: 220,
justifyContent: 'flex-end',
transform: [{ scaleX: 1.2 }, { scaleY: 1.2 }],
left: 15,
}}
onValueChange={(itemValue, itemIndex) =>
setSelectedValue(itemValue)
}
>
<Picker.Item label="ראש העין" value="1" />
<Picker.Item label="מעבדה חיפה" value="2" />
<Picker.Item label="מעבדה נס ציונה" value="3" />
</Picker>
</View>
</View>
</View>
</>
);
}
【问题讨论】：
标签： javascript reactjs react-native keyboard