const headerHeight = useHeaderHeight();
const keyboardVerticalOffset = Platform.OS === 'ios' ? headerHeight + 20 : 0;
const behavior = Platform.OS === 'ios' ? 'padding' : 'height';

<SafeAreaView style={styles.wrapper}>
  <KeyboardAwareScrollView
    keyboardVerticalOffset={keyboardVerticalOffset}
    behavior={behavior}
    contentContainerStyle={{flexGrow: 1}}
    style={{
      backgroundColor: 'blue',
    }}>
    <View style={{flex: 1, backgroundColor: 'red', height: '100%'}}>
      <Text>Details Screen</Text>
      <View style={styles.priceInputWrapper}>
        <Text style={styles.dollarSignText}>$</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.priceInput}
          onChangeText={handlePriceValue}
          value={priceValue}
          placeholder="0"
        />
      </View>
    </View>
    <ButtonTouchOpacity onPress={() => navigation.navigate('PostDelivery')}>
      <Text>Save and Next</Text>
    </ButtonTouchOpacity>
  </KeyboardAwareScrollView>
</SafeAreaView>

enter image description here enter image description here

मैं इसे सेट करने की कोशिश कर रहा हूं ताकि जब कीबोर्ड पॉप अप हो, तो नीचे का बटन कीबोर्ड के ऊपर होगा। पृष्ठ के पाद लेख पर बटन रखने का प्रयास कर रहा है।

0
hellomello 24 जून 2021, 17:45

2 जवाब

सबसे बढ़िया उत्तर

IMO KeyboardAwareScrollView का उपयोग मामला आपसे थोड़ा अलग है। मैं इसका उपयोग तब करता हूं जब ऐसी स्थिति होती है कि उपयोगकर्ता एकाधिक इनपुट के बीच फोकस बदल सकता है और उन्हें स्वचालित रूप से एक दृश्य स्थिति में गठबंधन किया जाना चाहिए। इस तरह के मामलों के लिए, मैं आरएन के KeyboardAvoidingView घटक का उपयोग करता हूं। मैं नहीं जानता कि आप KeyboardAwareScrollView का उपयोग करने में कितने सख्त हैं, लेकिन यदि आप इसके बारे में इतने सख्त नहीं हैं, तो यहां एक स्निपेट है जो KeyboardAvoidingView के साथ काम करता है:

import * as React from "react";
import {
    View,
    Button,
    SafeAreaView,
    Text,
    TextInput,
    Platform,
    KeyboardAvoidingView
} from "react-native";

export default function App() {
    const headerHeight = 20;
    const keyboardVerticalOffset =
        Platform.OS === "ios" ? headerHeight + 20 : 0;
    const behavior = Platform.OS === "ios" ? "padding" : "height";

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <KeyboardAvoidingView
                keyboardVerticalOffset={keyboardVerticalOffset}
                behavior={behavior}
                style={{
                    flex: 1
                }}
            >
                <View
                    style={{ flex: 1, backgroundColor: "red", height: "100%" }}
            >
                <Text>Details Screen</Text>
                <TextInput 
                style={{
                    width: 500,
                    height: 60,
                    backgroundColor: "cyan"
                }}
                />
            </View>
            <Button
                title="Save and Exit"
            />
        </KeyboardAvoidingView>
    </SafeAreaView>
);
}
1
Erinç 24 जून 2021, 21:01

आपको स्क्रॉलव्यू के बाहर बटन को स्थानांतरित करने की आवश्यकता है।

const headerHeight = useHeaderHeight();
const keyboardVerticalOffset = Platform.OS === 'ios' ? headerHeight + 20 : 0;
const behavior = Platform.OS === 'ios' ? 'padding' : 'height';

<SafeAreaView style={styles.wrapper}>
  <KeyboardAwareScrollView
    keyboardVerticalOffset={keyboardVerticalOffset}
    behavior={behavior}
    contentContainerStyle={{flexGrow: 1}}
    style={{
      backgroundColor: 'blue',
    }}>
    <View style={{flex: 1, backgroundColor: 'red', height: '100%'}}>
      <Text>Details Screen</Text>
      <View style={styles.priceInputWrapper}>
        <Text style={styles.dollarSignText}>$</Text>
        <TextInput
          keyboardType="numeric"
          style={styles.priceInput}
          onChangeText={handlePriceValue}
          value={priceValue}
          placeholder="0"
        />
      </View>
    </View>
  </KeyboardAwareScrollView>
  <ButtonTouchOpacity onPress={() => navigation.navigate('PostDelivery')}>
    <Text>Save and Next</Text>
  </ButtonTouchOpacity>
</SafeAreaView>
0
Sagar Shakya 24 जून 2021, 18:31