React native 将本机滚动响应为on模式_React Native_Scrollview

React native 将本机滚动响应为on模式

react-native

React native 将本机滚动响应为on模式,react-native,scrollview,React Native,Scrollview,我实际上在一个选择器组件上工作，默认情况下，该组件需要位于中间值的中心。我创建了一个带有带有ref的ScrollView的模式，并在此示例上使用scrollTo函数视图：已尝试所有操作，但出现以下错误：无法读取未定义的属性“scrollTo” 有人有小费吗 import React from 'react'; import { Modal,TouchableHighlight,View, StyleSheet,ScrollView,TextInput} from 'react-native

我实际上在一个选择器组件上工作，默认情况下，该组件需要位于中间值的中心。我创建了一个带有带有ref的ScrollView的模式，并在此示例上使用scrollTo函数视图：

已尝试所有操作，但出现以下错误：

无法读取未定义的属性“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>
    );
  }
}

从“React”导入React；
从“react native”导入{Modal，TouchableHighlight，View，StyleSheet，ScrollView，TextInput}；
从“本机库”导入{容器、标题、内容、图标、选择器、表单、文本、左侧、正文、右侧、标题、按钮、列表、列表项}；
const Mystyles=StyleSheet.create({
容器：{
},
b选择：{
边框颜色：“#a1a1”，
边框宽度：1，
填充：5，
差额：10，
身高：33
},
占位符选择：{
颜色：“#a1a1”，
},
值选择：{
颜色：'黑色'，
}
});
设scrollYPos=0；
var itemsArray=[]；
for（设i=0；i<90；i++）{
推送（i）；
}
导出默认类选择扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：itemsArray，
modalVisible:错误，
孤岛加载：false，
选择值：“”，
占位符：'占位符'，
类型：'int'
}
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
scrollYPos=this.state.screenHeight*1；
this.scroller.scrollTo（{x:0，y:scrollYPos}）；
}
选择项目=（项目）=>{
这是我的国家({
选择值：项目，
modalVisible:false
});
this.props.returnSelect（项目）；
}
render（）{
const{selectValue，items，placeholder}=this.state；
返回(
{this.setModalVisible（false）；}>
标题
{this.scroller=scroller}}>
{this.selectItem（item）；}}}selected={selectValue==item}>
{item}
}>
{
此.setModalVisible（true）；
}}>
{selectValue？selectValue:占位符}
);
}
}

顺便说一句，屏幕高度是常量，不要使用状态。

我的代码？对我来说，只有链接的例子工作。

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

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