Question

我实际上是在选择器组件上工作，该组件默认情况下必须位于中间值的中心。我已使用带有ref的ScrollView创建了一个模态，并在以下示例中使用了scrollTo函数视图：https://snack.expo.io/SkileGr9X

尝试了所有但都收到此错误：

无法读取未定义的属性'scrollTo'

有人有小费吗？

import React from 'react';
import { Modal,TouchableHighlight,View, StyleSheet,ScrollView,TextInput} from 'react-native';
import { Container, Header, Content, Icon,Picker, Form, Text,Left, Body, Right, Title,Button,List, ListItem} from "native-base";

const Mystyles = StyleSheet.create({
  container:{

  },
  btnSelect:{
    borderColor:'#a1a1a1',
    borderWidth:1,
    padding:5,
    margin:10,
    height:33
  },
  placeholderSelect:{
    color:'#a1a1a1',
  },
  valueSelect:{
    color:'black',
  }
});

let scrollYPos = 0;
var itemsArray = [];
for(let i=0; i < 90;i++){
  itemsArray.push(i);
}

export default class Selects extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      items:itemsArray,
      modalVisible: false,
      isLoading:false,
      selectValue:'',
      placeholder:'placeholder',
      type:'int'
    }
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});

    scrollYPos = this.state.screenHeight * 1;
    this.scroller.scrollTo({x: 0, y: scrollYPos});
  }

  selectItem = (item) =>{
    this.setState({
      selectValue:item,
      modalVisible:false
    });
    this.props.returnSelect(item);
  }

  render(){

  const { selectValue,items,placeholder } = this.state;

    return (
      <View style={Mystyles.container}>
        <Modal
          animationType="slide"
          presentationStyle='formSheet'
          visible={this.state.modalVisible}>
            <Header>
              <Left>
                <Button transparent onPress={() => {this.setModalVisible(false);}}>
                  <Icon name='arrow-back' />
                </Button>
              </Left>
                <Body>
                  <Title>Header</Title>
                </Body>
              <Right />
            </Header>
            <ScrollView ref={(scroller) => {this.scroller = scroller}}>
              <List dataArray={items}
              renderRow={(item) =>
                <ListItem onPress={() => {this.selectItem(item);}} selected={selectValue == item}>
                <Left>
                  <Text>{item}</Text>
                </Left>
                <Right>
                  <Icon name="arrow-forward" />
                </Right>
                </ListItem>
              }>
              </List>
            </ScrollView>
        </Modal>

        <TouchableHighlight
          style={Mystyles.btnSelect}
          underlayColor="rgba(0, 0, 0, 0.1)"
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text style={selectValue ? Mystyles.valueSelect : Mystyles.placeholderSelect}>{selectValue ? selectValue : placeholder}</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Answer 1

tableView.deselectRow

当您按下此按钮时，模态消失，因此您可以在视图消失时滚动。您必须检查：

<Button transparent onPress={() => {this.setModalVisible(false);}}>

顺便说一句，screenHeight是一个常量，请勿使用状态。

反应本机滚动到模态

1 个答案: