Question

我正在开发反应原生应用。我已将输入字段设置为注册表单并尝试添加验证。如果字段为空，则按“提交”按钮突出显示带红色边框的输入字段及其工作但不将屏幕旋转到空字段。我想将屏幕滚动到按下提交按钮的空输入字段。这是我的代码： -

<Input label="First Name"
                              value={this.state.fname}
                               marginTop={23}
                               borderColor={this.state.bgcolor}
                              onChange={this.handleChangeInput.bind(this, 'fname')}  
                              ref='scrollfname'

                        />

                            <Input label="Last Name"
                                value={this.state.lname}
                                marginTop={23}
                                borderColor={this.state.bgcolor1}
                                onChange={this.handleChangeInput.bind(this, 'lname')}
                        />
                         <Input label="E-Mail Address"
                               value={this.state.email}
                               placeholder="example@gmail.com"
                               marginTop={23}
                               borderColor={this.state.bgcolor2}
                               onChange={this.handleChangeInput.bind(this, 'email')}
                        />
                        <Text style={productStyle.detail}>Company Details</Text>

                          <Text style={productStyle.detail}>Your Address</Text>
                           <Input label="Street Address"
                               value={this.state.street}
                                marginTop={23}
                                borderColor={this.state.bgcolor3}
                               onChange={this.handleChangeInput.bind(this, 'street')}
                        />
                         <Input label="City"
                                value={this.state.city}
                                marginTop={23}
                                borderColor={this.state.bgcolor4}
                                onChange={this.handleChangeInput.bind(this, 'city')}
                        />

                          <Text style={productStyle.detail}>Your Contact Information</Text>
                            <Input label="Telephone Number"
                               value={this.state.phone}
                                marginTop={23}
                                borderColor={this.state.bgcolor7}
                               onChange={this.handleChangeInput.bind(this, 'phone')}
                        />
<View style={productStyle.greenBT}>
            <Text onPress={this.handePressSignIn.bind(this)} style={{fontSize:13,fontWeight:"lighter",textAlign:'center',color:'#fff'}}>{<Icon name="user"/>} Continue</Text>              
        </View>

这是功能： -

  handePressSignIn() {
        if(this.state.fname == ""){
            this.setState({bgcolor:'#ff0000'});             

            return false;
            }
        else if(this.state.lname == ""){
            this.setState({bgcolor1:'#ff0000'});
            return false;
            }
}

如何将屏幕滚动到空的输入字段。当我点击提交按钮时。

Answer 1

将您的视图嵌入到滚动视图组件中：

<ScrollView ... >
    <YourView>
    ...
    </YourView>
</ScrollView>

调用以下方法滚动到某个位置：

scrollTo({x: 0, y: 0, animated: true});

您需要的是计算要滚动的x和y偏移量。

如何使用React Native在特定输入上滚动屏幕

1 个答案: