陣營母語：處理多數字輸入

我建立的數字文本輸入矩陣的過程中，產生了很大的麻煩，因爲數字鍵盤沒有返回或下一頁按鈕。另外，數字鍵盤沒有Done欄，所以我不得不使用TouchableWithoutFeedback組件來處理它。陣營母語：處理多數字輸入

我想知道是否有一種推薦的方式無縫輸入許多數字到反應原生TextInput s矩陣？

下面是我的代碼，我已經着色了容器以幫助放置應用程序。

import React from 'react'; 
import { StyleSheet, Text, View, TextInput, TouchableWithoutFeedback, Keyboard} from 'react-native'; 

class InputBox extends React.Component { 
    render() { 
     return (
      <View style={styles.inputContainer}> 
      <TextInput 
       keyboardType="numeric" 
       style={styles.matrixNumberInput} 
      /> 
      </View> 
     ) 
    } 
} 

export default class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {'size': 3}; 
    } 

    render() { 
    return (
     <View style={styles.rootContainer}> 
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}> 
      <View style={styles.appContainer}> 
      <View style={styles.matrixContainer}> 
       { this._renderMatrixInputs() } 
      </View> 

      <View style={styles.solutionsContainer}> 
       {/* solutions here */} 
      </View> 

      </View> 
     </TouchableWithoutFeedback> 
    </View> 

    ); 
    } 

    _renderMatrixInputs() { 
    // harcoded 3 x 3 matrix for now.... 
    let views = []; 
    let {size} = this.state; 
     for (var r = 0; r < size; r++) { 
      let inputRow = []; 
      for (var c = 0; c < size; c++) { 
       inputRow.push(
       <InputBox value={'X'} key={r.toString() +c.toString()} /> 
      ); 
      } 
     views.push(<View style={styles.inputRow} key={r.toString()}>{inputRow}</View>) 
     } 
    return views 
    } 
} 

const styles = StyleSheet.create({ 
    rootContainer: { 
    flex:25, 
    backgroundColor: 'lightyellow', 
    }, 
    appContainer: { 
    flex:1, 
    backgroundColor: 'lightblue' 
    }, 
    matrixContainer: { 
    marginTop: 25, 
    flex: 3, // take up half of screen 
    backgroundColor: 'ivory', 
    }, 
    solutionsContainer: { 
    flex:5, // take up other half of screen 
    backgroundColor: 'lavenderblush', 
    }, 
    inputRow: { 
     flex: 1, 
     maxHeight: 75, 
     flexDirection: 'row', 
     justifyContent: 'center', 
     alignItems: 'center', 
    }, 
    inputContainer: { 
     flex: 1, 
     margin: 3, 
     maxHeight: 35, 
     maxWidth: 75, 
     borderBottomWidth: 1, 
     borderBottomColor: 'gray', 
    }, 

    matrixNumberInput: { 
    flex:1, 
    backgroundColor:"azure" 
    } 

});

謝謝！

來源

2017-04-26 wcwagner

用於處理鍵盤下一個和做，您可以使用react-native-smart-scroll-view。這是一個使用textInputs的scrollView。

來源

2017-04-26 05:23:11

我恐怕這不會工作，因爲他們說：*警告這不會工作，如果TextInput的鍵盤類型設置爲'數字鍵盤'，'十進制鍵盤'，'電話鍵盤'或'數字'，因爲他們沒有返回鍵* – wcwagner

哪部分不能滿足您的需求？ –

我的鍵盤屬於'Numeric'類型，這意味着'react-native-smart-scroll-view'將不起作用，正如他們的文檔中所述。 – wcwagner

陣營母語：處理多數字輸入

回答

相關問題