Question

我想在TouchableOpacity onPress上打开一个数字键盘。然后stockAtStart和stockAtEnd在输入时监听键盘输入和更新。

class MakeInventory extends React.Component {

      state = {
        stockAtStart: 0,
        stockAtEnd: 0,
      }

      render() {
        return (
          <View style={styles.container}>
            <View style={(styles.boxContainerToggle, styles.boxOne)}>
              <Text style={[styles.currentDate]}>27 Feb 2018</Text>
            </View>

            <View style={[styles.boxContainerToggle, styles.boxTwo]}>
                <TouchableOpacity style={[styles.boxContainer]}>
                  <Text style={styles.inventoryParagraph}>start</Text>
                  <Text style={styles.stockNumber}>{this.state.stockAtStart}</Text>
                </TouchableOpacity>
            </View>

             <View style={[styles.boxContainerToggle, styles.boxThree]}> 
                <TouchableOpacity style={[styles.boxContainer]}>
                  <Text style={styles.inventoryParagraph}>end</Text>
                  <Text style={styles.stockNumber}>{this.state.stockAtEnd}</Text>
                </TouchableOpacity>
              </View>

              <View style={[styles.boxContainerToggle, styles.boxFour]}>  
                <TouchableOpacity style={styles.boxContainer}>
                  <Text style={styles.paragraph}>COUNT</Text>
                </TouchableOpacity>
              </View>
            </View>
        );
      }
    }

Answer 1

https://github.com/amirfl/react-native-num-textinput

import NumTextInput from 'react-native-num-textinput'

<NumTextInput
    underlineColorAndroid="transparent"
    precision={EXPENSE_AMOUNT_PRECISION}
    maxLength={EXPENSE_AMOUNT_MAX_LENGTH}
    keyboardType={Platform.OS === 'ios' ? 'numeric' : 'phone-pad'}
    style={textInput}
    placeholder= 'what ever...'
    placeholderTextColor={ColorStyles.slateGray}
    onChangeText={
        (value) => {
            this.setState({inputValue: value})
        }
    }
    value={this.state.inputValue}
/>

在TouchableOpacity onPress上打开键盘

1 个答案: