如何从 react-native-numeric-input 中获取价值

Question

我是原生反应的新手。我正在使用这个包https://www.npmjs.com/package/react-native-numeric-input。

我的问题是如何将值传递到下一页。

使用此代码：

    class FirstActivity extends Component {
            static navigationOptions = {
            title: 'Main Screen'
          }
        constructor(props) {
            super(props)
            this.state = {number: ''}
          }

Send_Data_Function = () => { this.props.navigation.navigate('Second', { no: this.state.number, }); }

        render() {
            return (
            <NumericInput value={this.state.value} onChange={value => this.setState({number : value})} 

<TouchableOpacity activeOpacity={.4} style={styles.TouchableOpacityStyle} onPress={this.Send_Data_Function} >
                        <Text style={styles.TextStyle}> NEXT </Text>
                    </TouchableOpacity>/>
        )}

    class SecondActivity extends Component{
         static navigationOptions =
            {
                title: "Second Activity"
            };

    render() {
            return (
            <View style= {styles.MainContainer}>
                <Text style={styles.textStyle}>
                1 = {this.props.navigation.state.params.no}
                </Text>
            </View>
            )}
    }

    const AppNavigator = createStackNavigator({
        First : {screen: FirstActivity},
        Second : {screen: SecondActivity}
    });

     export default createAppContainer(AppNavigator);

如何得到结果？谁能帮帮我？

Answer 1

你的增减值在下一页成功传递，但你没有传递正确的状态，你必须在第二个活动中传递数字状态。

Send_Data_Function = () => {
    this.props.navigation.navigate("Second", { no: this.state.number });
  };

并通过1 = {this.props.navigation.state.params.no}代码读取成功。

您的主要问题是当您按下增加或减少按钮时，这些按钮中间的值不会改变吗？

这是您的解决方案。

当你初始化你的数字状态时，不要分配字符串值。而不是用 number

来初始化数字状态

您的代码：

constructor(props) {
            super(props)
            this.state = {number: ''}
          }

变化：

constructor(props) {
                super(props)
                this.state = {number: 0}//<-------------
              }

下一个更改是您可能忘记为 NumericInput 组件分配初始值，这就是它不会显示任何状态更改的原因。同样在这里，您使用了错误的状态来分配值和显示值。您有一个初始化的数字状态并使用值状态来分配值。 这是您的解决方案。

您的代码：

<NumericInput 
 value={this.state.value}//<----mistake---
 onChange={value => this.setState({number : value})}/>

解决方案：

<NumericInput
 initValue={this.state.number}//<---Add---
 value={this.state.number}//<----changes---
 onChange={value => this.setState({number: value })}/>

Answer 2

首先您需要设置数值输入变化值的状态。 请尝试如下操作：

...
  constructor(props) {
    super(props);
    this.state = {
      numericInputValue: ''
    }
  }
  onChangeNumericInputValue = (value) => {
    this.setState({ numericInputValue: value });
  }

  render() {
  ...
    <NumericInput type='up-down' onChange={this.onChangeNumericInputValue} />
  ...
  }
...

下一步是将numericInputValue 传递到下一页。 如果你使用 react-navigation 在场景之间导航，你可以这样做：

this.props.navigation.navigate('SceneName', { numericInputValue: this.state.numericInputValue })

Answer 3

在你的 secondActivity 中试试这个 -->

 class SecondActivity extends Component{
         static navigationOptions =
            {
                title: "Second Activity"
            };

         constructor(props){
             super(props);
             this.state={
        numericInputValue:props.navigation.getParam("no",null)
                 }
               }


    render() {
            return (
            <View style= {styles.MainContainer}>
                <Text style={styles.textStyle}>
                1 = {this.state.numericInputValue}
                </Text>
            </View>
            )}
    }