web-dev-qa-db-ja.com

反応ネイティブで入力フィールドに入るときにキーボードの上にテキスト入力ボックスを設定する方法

反応ネイティブのTextInputコンポーネントを使用しています。ここで、ユーザーがtextInputフィールドをクリックした場合にキーボードの上にInputBoxを表示する必要があります。

以下を試しましたが、問題に直面しています

1。キーボード回避ビュー

 a. Here it shows some empty space below the input box 
 b. Manually I need to scroll up the screen to see the input field which I was given in the text field
 c. Input box section is hiding while placing the mouse inside the input box

2。 react-native-Keyboard-aware-scroll-view

a.It shows some empty space below the input box
b.ScrollView is reset to the top of the page after I moving to the next input box

ここでは、ScrollViewコンポーネント内にKeyboard-aware-scroll-viewを設定します

親切に明確にする

私のサンプルコードは

<SafeAreaView>
<KeyboardAvoidingView>
<ScrollView>        
        <Text>Name</Text>
            <AutoTags
            //required
             suggestions={this.state.suggestedName}
             handleAddition={this.handleAddition}
             handleDelete={this.handleDelete}
             multiline={true}
             placeholder="TYPE IN"
             blurOnSubmit={true}
             style= {styles.style}
             />
</ScrollView>   
</KeyboardAvoidingView>
</SafeAreaView>

[ https://github.com/APSL/react-native-keyboard-aware-scroll-view]

react-nativetextboxkeyboard-eventstextinput
5
sejn

次のように KeyboardAvoidingView を使用できます

_if (Platform.OS === 'ios') {
        return <KeyboardAvoidingView behavior="padding">
            {this.renderChatInputSection()}
        </KeyboardAvoidingView>
    } else {
        return this.renderChatInputSection()
    }
_

this.renderChatInputSection()は、メッセージを入力するためのtextinputのようなビューを返します。これがお役に立てば幸いです。

1
Maneesh

@basbaseソリューションのソリューションをベースにしています。

TextInputが私の全体的なビューに関係なくジャンプするという彼の解決策に関する私の問題。

私の場合、それは私が望んでいたものではなかったので、彼の提案どおりに行いましたが、少し変更を加えました

親ビューに次のようなスタイルを与えるだけです。

 <View 
             style={{
              flex: 1,
              bottom:   keyboardOffset,
          }}>

そしてそれはうまくいくでしょう！唯一の問題は、キーボードが開いているときに下にスクロールすると、画面の最後に余分な空白が表示されることです。

0
RowanX

サイドプロジェクトで作業しているときに同じ問題に直面し、KeyboardAvoidingViewを少し調整した後で解決しました。私は my solution をnpmに公開しました。試してフィードバックを送ってください！ iOSのデモ

スニペットの例

import React from 'react';
import { StyleSheet, TextInput } from 'react-native';
import KeyboardStickyView from 'rn-keyboard-sticky-view';

const KeyboardInput = (props) => {
  const [value, setValue] = React.useState('');

  return (
    <KeyboardStickyView style={styles.keyboardView}>
      <TextInput
        value={value}
        onChangeText={setValue}
        onSubmitEditing={() => alert(value)}
        placeholder="Write something..."
        style={styles.input}
      />
    </KeyboardStickyView>
  );
}

const styles = StyleSheet.create({
  keyboardView: { ... },
  input: { ... }
});

export default KeyboardInput;
0
Js. Lim

Androidの場合、Android:windowSoftInputMode="adjustResize" for Activity in AndroidManifest file、したがって、キーボードが表示されると、画面のサイズが変更され、TextInputを画面の下部に配置すると、画面が維持されますキーボードの上

0
SiSa

フックのバージョン：

const [keyboardOffset, setKeyboardOffset] = useState(0);
const onKeyboardShow = event => setKeyboardOffset(event.endCoordinates.height);
const onKeyboardHide = () => setKeyboardOffset(0);
const keyboardDidShowListener = useRef();
const keyboardDidHideListener = useRef();

useEffect(() => {
  keyboardDidShowListener.current = Keyboard.addListener('keyboardWillShow', onKeyboardShow);
  keyboardDidHideListener.current = Keyboard.addListener('keyboardWillHide', onKeyboardHide);

  return () => {
    keyboardDidShowListener.current.remove();
    keyboardDidHideListener.current.remove();
  };
}, []);
0
Teodor Ciuraru

これは間違いなく便利です

キーボード対応のスクロールビューAndroid問題

追加する必要がある理由は本当にわかりません

"androidStatusBar"：{"backgroundColor"： "＃000000"}

keyboardawareScrollviewが機能するため

注：最後の手順なしでプロジェクトを再起動することを忘れないでください。うまく動作しない可能性があります！

0
Frankrnz

react-native-keyboard-aware-scroll-viewはiosで同様の問題を引き起こしました。そのとき、私は react-native-keyboard-aware-view に出くわしました。スニペットはほとんど同じです。

    <KeyboardAwareView animated={true}>
        <View style={{flex: 1}}>
          <ScrollView style={{flex: 1}}>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>A</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>B</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>C</Text>
              <Text style={{fontSize: 20, color: '#FFFFFF'}}>D</Text>
          </ScrollView>
        </View>
        <TouchableOpacity style={{height: 50, backgroundColor: 'transparent', alignItems: 'center', justifyContent: 'center', alignSelf: 'stretch'}}>
          <Text style={{fontSize: 20, color: '#FFFFFF'}}>Submit</Text>
        </TouchableOpacity>
      </KeyboardAwareView>

それがhepls願っています

0
HGK