首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >焦点上未显示TextInput

焦点上未显示TextInput
EN

Stack Overflow用户
提问于 2018-08-22 01:58:42
回答 3查看 417关注 0票数 1

我有一个文本输入,名为电子邮件或用户名,当我点击它时,它不显示我键入的值,我认为这是因为屏幕大小,无论如何,我可以调整文本输入,以便当我点击它时,全文输入显示,我可以看到我键入的值。它下面的其他文本输入显示了,但它没有显示,如果我将它包装在滚动视图中,请提供任何帮助将很好,谢谢。

这是页面

当我单击电子邮件或用户名时出现

在滚动视图中包装视图的将显示此

MY CODE

 <View style={{
                height: 42, width: 72,
                backgroundColor: '#EFB879', marginTop: '15.15%',
                alignSelf: 'center'
            }}>
                <Text style={{
                    fontFamily: 'mont-bold',
                    fontSize: 34,
                    color: '#fff'
                }}>
                    sẹlẹ
                </Text>
            </View>
                <View style={{
                    width: '83.33%',
                    height: this.state.visible? 240 : 180,
                    backgroundColor: '#fff',
                    position: 'absolute',
                    bottom: 0,
                    alignSelf: 'center',
                    borderTopRightRadius: 20,
                    borderTopLeftRadius: 20,
                }}>
                    <View style={{
                        width: '100%',
                        height: 60,
                        backgroundColor: '#fff',
                        borderBottomWidth: 0.7,
                        borderColor: '#d9d8d8',
                        borderTopRightRadius: 6,
                        borderTopLeftRadius: 6,
                    }}>
                        <TextInput placeholder="Email or mobile number"
                                   placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
                                   placeholderTextColor="#615D5D"
                                   underlineColorAndroid={'transparent'}
                                   style={{
                                       alignSelf: 'center',
                                       flex: 1,
                                       paddingTop: 10,
                                       paddingRight: 10,
                                       paddingBottom: 10,
                                       width: '85%',
                                       paddingLeft: 0,
                                       padding: 4,
                                       backgroundColor: '#fff',
                                       fontSize: 14, fontFamily: 'mont', color: '#615D5D',
                                   }}/>
                    </View>
                        <View style={{
                        width: '100%',
                        height: 60,
                        backgroundColor: '#fff',
                        borderBottomWidth: 0.7,
                        borderColor: '#d9d8d8',
                    }}>
                        <TextInput placeholder={picked}
                                   value={this.state.text}
                                   onChangeText={(text) => this.handleChange(text)}
                                   onFocus={() => this.setState({visible: true})}
                                   onBlur={() => this.setState({visible: false})}
                                   placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
                                   placeholderTextColor="#615D5D"
                                   underlineColorAndroid={'transparent'}
                                   style={{
                                       alignSelf: 'center',
                                       flex: 1,
                                       paddingTop: 10,
                                       paddingRight: 10,
                                       paddingBottom: 10,
                                       width: '85%',
                                       paddingLeft: 0,
                                       padding: 4,
                                       backgroundColor: '#fff',
                                       fontSize: 14, fontFamily: 'mont', color: '#615D5D',
                                   }}
                        contextMenuHidden={true}/>
                    </View>

                    {this.state.visible ? <View style={{
                        justifyContent: 'flex-end',
                        height: 200,
                        width: '100%',
                    }}>
                        <Text  style={styles.textHead}>
                            Select your Institute
                        </Text>
                        {view}
                    </View> : <View hide={true} style={{
                        width: '100%',
                        height: 60,

                        backgroundColor: '#fff',
                        justifyContent: 'center'
                    }}>
                        <TextInput placeholder="Password"
                                   placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
                                   placeholderTextColor="#615D5D"
                                   underlineColorAndroid={'transparent'}
                                   secureTextEntry={true}
                                   style={{
                                       alignSelf: 'center',
                                       flex: 1,
                                       paddingTop: 10,
                                       paddingRight: 25,
                                       paddingBottom: 10,
                                       width: '85%',
                                       paddingLeft: 0,
                                       padding: 4,
                                       backgroundColor: '#fff',
                                       fontSize: 14, fontFamily: 'mont', color: '#615D5D',
                                   }}/><View style={{
                        width: 18, height: 11,
                        position: 'absolute', right: 25
                    }}>
                        <Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
                               source={require('../eye.png')}/>
                    </View>
                    </View>}
                </View>
            </View>
            <View style={{
                width: '83.36%',
                height: 60,
                backgroundColor: '#EFB879',
                alignSelf: 'center',
                justifyContent: 'center',
                alignItems: 'center',
                borderBottomRightRadius: 6,
                borderBottomLeftRadius: 6,
            }}>
                <Text style={{
                    fontFamily: 'mont-semi',
                    fontSize: 16,
                    color: '#fff'
                }}>
                    SIGN UP
                </Text>
            </View>
            <View
                style={{
                    height: 0,
                    width: 120,
                    borderBottomWidth: 1.2,
                    borderColor: '#d9d8d8',
                    alignSelf: 'center',
                    marginTop: '50%'
                }}>
            </View>
            <View style={{width: '100%',
                height: 2,flexDirection: 'row',
                //  alignSelf: 'center',
                justifyContent: 'center',
                marginTop: '5%'}}>
                <Text style={{
                    color: '#615D5D',
                    fontFamily: 'mont-medium',
                    fontSize: 14,
                    alignSelf: 'center',
                }}>
                    Already have an account? </Text>
                <TouchableNativeFeedback
                    onPressIn={() => this.setState({pressed: !this.state.pressed})}
                    onPressOut={() => this.setState({pressed: !this.state.pressed})}
                    onPress={this.onP.bind(this)}>
                    <Text
                        style={{
                            color: '#EFB779',
                            fontFamily: 'mont-medium',
                            fontSize: this.state.pressed? 16: 14,
                            alignSelf: 'center',}}>
                        SIGN IN
                    </Text>
                </TouchableNativeFeedback>
            </View>
        </View>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-22 09:30:06

这对我很有效:

使用React Native中的Keyboard API在键盘上设置侦听器。

this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);

根据键盘的显示与否,使用状态变量将ScrollView (包装您的内容)的scrollEnabled属性设置为truefalse。因此,当键盘显示时,滚动将被启用。

在内容的底部添加一个带有一些height的条件View,当显示键盘时,它是活动的,这样您就可以滚动了。

记住这一点:

componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}
票数 1
EN

Stack Overflow用户

发布于 2018-08-22 02:07:09

将整个代码放在ScrollView中,并对视图使用固定位置。试试看。

票数 0
EN

Stack Overflow用户

发布于 2018-08-22 06:45:49

在第一个和最后一个textInput.try中没有onchangetext()事件将其添加到您的代码中。

constructor(props) {
super(props);
this.state = { email:'',text:'',password:'' };
}
...  

  <TextInput

    onChangeText={(email) => this.setState({email})}
    value={this.state.email}
  />
   <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
  />
   <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(password) => this.setState({password})}
    value={this.state.password}
  /> 

我希望这对你有帮助

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51954288

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档