软键盘外无法获得触摸响应

时间:2017-05-02 02:35:58

标签: javascript reactjs react-native

Text组件在我的其他情况下工作得很好但是在这个页面上的事情很奇怪,它的行为如下:我无法在软键盘之外得到触摸响应,我只能触摸软键盘,发生了什么?我的渲染方法:

    <View style={styles.root}>
                <TouchableOpacity activeOpacity={1} onPress={() => {
                }}>
                    <Image source={exploreIcon} style={{
                        width: 88,
                        height: 88,
                        marginTop: 40,
                        marginBottom: 40,
                        alignSelf: 'center',
                        resizeMode: 'contain'
                    }}/>
                </TouchableOpacity>
                <TouchableOpacity style={styles.linkSection} onPress={() => {
                    this.props.navigator.push({
                        name: 'hotlink'
                    });
                }}>
                    <View style={styles.linkAddress}>
                        <Image source={copyLinkIcon} style={styles.copyLinkImage}/>
                        <Text style={styles.linkAddressHint}>{strings.linkAddressHint}</Text>
                    </View>
                    <View style={styles.linkPlayBtn}>
                        <Text style={styles.playBtnHint}>
                            {strings.playBtnHint}
                        </Text>
                    </View>
                </TouchableOpacity>

                <View style={styles.favorite}>
                    <Text style={styles.favoriteText}>{strings.myFavorite}</Text>
                    <FlatList
                        style={{
                            marginTop: 10,
                            alignSelf: 'stretch',
                            paddingLeft: this.itemPadding,
                            paddingRight: this.itemPadding
                        }}
                        data={this.state.customLinkArray}
                        renderItem={this._renderItem}
                        onRefresh={this._onRefresh}
                        numColumns={4}
                        horizontal={false}
                        keyExtractor={(item, index) => {
                            return String(index);
                        }}
                    />
                </View>

                <PopupDialog
                    ref={(addLinkDialog) => {
                        this.addLinkDialog = addLinkDialog;
                    }}
                    dialogTitle={<DialogTitle title={strings.addMoreLink}/>}
                    width={0.8}
                    height={0.4}
                    dialogStyle={{marginTop: -100}}
                    dialogAnimation={scaleAnimation}
                    onDismissed={() => {
                        this._resetCurrentLinkItem();
                    }}>
                    <View style={styles.dialogContentView}>
                        <TextInput
                            ref={(o) => {
                                this.linkTitleTextInput = o;
                            }}
                            style={{flex: 1}}
                            autoCapitalize='none'
                            placeholder={strings.addLinkTitleHint}
                            keyboardType='default'
                            enablesReturnKeyAutomatically={true}
                            autoCorrect={false}
                            onChangeText={(text) => {
                                this.state.currentLinkItem.webTitle = text;
                                this.setState({
                                    currentLinkItem: this.state.currentLinkItem,
                                });
                            }}
                            value={title}
                        />
                        <View style={{backgroundColor: 'black', height: 0.5}}/>
                        <TextInput
                            ref={(o) => {
                                this.linkAddressTextInput = o;
                            }}
                            style={{flex: 1, marginTop: 17}}
                            autoCapitalize='none'
                            placeholder={strings.addLinkAddressHint}
                            keyboardType='url'
                            enablesReturnKeyAutomatically={true}
                            autoCorrect={false}
                            onChangeText={(text) => {
                                this.state.currentLinkItem.webUrl = text;
                                this.setState({
                                    currentLinkItem: this.state.currentLinkItem,
                                });
                            }}
                            value={this.state.currentLinkItem.webUrl}
                        />
                        <View style={{backgroundColor: 'black', height: 0.5}}/>
                        <View style={{marginTop: 17, flexDirection: 'row'}}>
                            <TouchableOpacity style={{
                                flex: 1, height: 33,
                                borderColor: '#4d515a',
                                borderWidth: 1,
                                borderRadius: 17,
                                margin: 17,
                                justifyContent: 'center',
                                backgroundColor: '#fff',
                                padding: 5
                            }} onPress={() => {
                                this.addLinkDialog.dismiss();
                                this._resetCurrentLinkItem();
                            }}>
                                <Text style={{textAlign: 'center'}}>{strings.cancel}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={{
                                flex: 1, height: 33,
                                borderColor: '#4d515a',
                                borderWidth: 1,
                                borderRadius: 17,
                                margin: 17,
                                justifyContent: 'center',
                                backgroundColor: '#4d515a',
                                padding: 5
                            }} onPress={() => {
                                this._addCustomLink();
                            }}>
                                <Text style={{textAlign: 'center', color: '#fff'}}>{strings.confirm}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </PopupDialog>

                <ActionSheet
                    ref={(o) => this.ActionSheet = o}
                    options={this.BUTTONS}
                    destructiveButtonIndex={1}
                    cancelButtonIndex={2}
                    onPress={this._handleLinkOptions}
                />

            </View>

1 个答案:

答案 0 :(得分:0)

尝试使用TouchableWithoutFeedback。您必须将所有子组件包装到View中,但TouchableWithoutFeedback只接受一个子组件。