2016-04-03 8 views
0

私は2つのテキスト入力を実装しようとしています。ベストプラクティスがスクロールビュー内にこれらをラップするかどうかはわかりません。しかし、私が下に示すようにそれを行うと、私はちょうど真ん中に一行を見る。TextInput with React Nativeは1行を表示します

スクロールビューを削除してただ1つのテキスト入力を残すと、入力できるボックスが表示されます。私はまだキーボードをシミュレータに表示させることができません。しかし私は手動で入力して状態を変えることができます。

複数のテキスト入力を許可する方法と、下からポップアップするネイティブキーボードを表示する方法については何か考えてください。

render() { 
    return (
     <ScrollView> 
     <TextInput 
     style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
     placeholder="Enter item 1" 
     value={this.state.text} 
     onChangeText={this.onChange} /> 
     <TextInput 
      style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
      placeholder="Enter item 2" 
      value={this.state.text} 
      onChangeText={this.onChange} /> 
     </ScrollView> 
    ); 
    } 
+0

あなたは、iOS上でいますか?ハードウェアキーボード(PCと画面に表示されているキーボード)を切り替えるオプションが必要です。 iOSシミュレータでは⌘Kだと思います。画面のキーボードが表示されるようにするには、iOSシミュレータ - >ハードウェア - >ハードウェアキーボードの接続をオフにする必要があります。 – whitep4nther

+0

あなたのディスプレイの問題に関して、私はiOS上で試すことはできません。私の近くのMacはありませんが、Androidではうまくいくようです。 ScrollViewの 'contentContainerStyle'属性にスタイルを追加してみてください。フレックスや高さを設定すると、問題が解決する可能性があります(https://facebook.github.io/react-native/docs/scrollview.html#content)。とにかく、インスペクタを使用して画面上の要素を検査してみてください(メニュー - >インスペクタ)。 – whitep4nther

答えて

0

1 - iOSシミュレータの場合は、オプションのハードウェアがある - >キーボード - >(デフォルトではオフになって)切り替えソフトウェアキーボード。このオプションをオンにすると、ネイティブキーボードの表示に関する問題が解決されます。

2 - 複数行のテキスト入力について。はい、これは問題ですが、以下にこの回答で共有される回避策があります。私はあなたの参照のための答えにリンクを添付します。

P .:自分で試したことはありませんが、その答えが問題を解決したとマークされています。 iOSシミュレータで

Multi-Line TextInput Hack - https://stackoverflow.com/a/31759113/5783646

0
  • ディスプレイキーボード:ハードウェア - >キーボード - >トグルソフトウェアキーボード
  • が複数のテキスト入力を表示:私の推測では、適用されるスタイル(かがあるということですTextInputが使用可能なサイズでレンダリングされないようにしている親要素または他の場所に適用されます。

私はあなたが求めているものを示しているRNの遊び場に例を作成しました:https://rnplay.org/apps/ldlfWw

関連する問題