阵营母语：处理多数字输入

Question

我建立的数字文本输入矩阵的过程中，产生了很大的麻烦，因为数字键盘没有返回或下一页按钮。另外，数字键盘没有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" 
    } 

}); 

谢谢！

Answer 1

用于处理键盘下一个和做，您可以使用react-native-smart-scroll-view。这是一个使用textInputs的scrollView。