React Native：处理多个数字input

我正在构build一个数字文本inputmatrix，由于数字键盘没有“ 返回”或“ 下一步”button，因此遇到了很多麻烦。 另外，数字键盘没有Done栏，所以我不得不使用TouchableWithoutFeedback组件来处理它。

我想知道是否有一个build议的方式无缝input许多数字到反应原生TextInputmatrix？

下面是我的代码，我已经着色了容器，以帮助奠定应用程序。

 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。