Reagieren Nativ: Handhabung mehr numerischen Eingaben

Question

ich dabei sind eine Matrix von numerischen Texteingaben zu bauen, und hat viel Mühe gehabt, da die numerische Tastatur nicht Zurück oder Weiter Taste hat. Außerdem fehlt der numerischen Tastatur ein Done Balken, so musste ich die TouchableWithoutFeedback Komponente verwenden, um es zu umgehen.

Ich frage mich, ob es eine empfohlene Möglichkeit gibt, viele Zahlen nahtlos in eine Matrix von reaktiven nativen TextInput s einzugeben?

Unten ist mein Code, ich habe die Container gefärbt, um die Anwendung zu erleichtern.

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" 
    } 

}); 

Dank!

Answer 1

Für den Umgang nächsten und getan in Tastatur können Sie react-native-smart-scroll-view verwenden. Es ist ein scrollView zum Arbeiten mit textInputs.