react-native - 单击链接后滚动到顶部反应本机

问题描述

我有一个问题，我不知道如何解决。在我的 react native 项目中，我在底部显示了一个数据列表和几个链接。单击任何这些链接后，它会导航到为单击的链接获取新数据的同一页面，但问题是页面永远不会滚动到顶部，它的位置保持不变或有时在中间。

类 ArticleLink ：

export default class ArticleLink extends React.Component {
  constructor(props) {
       super(props);
       this.scrollView = null;
         this.state = {
      isLoading: true,
      data: null,
      isError: false,
  }
}

  render() {
const { params } = this.props.navigation.state;

if(params!=null) {
   getArticleLinks(params.nid).then(data => {
      this.setState({
          isLoading: false,
    data: data
      })
  }, error => {
      Alert.alert("Error", "Something happend, please try again")
  }
)
}


      <View style={{ flex: 1 }}>
      <ScrollView>
          <Header style={{ backgroundColor: 'black' }}>
            <Left>
              <Button transparent>
                <Icon name='arrow-left' size={20} color="white" onPress={() => this.props.navigation.goBack()}/>
              </Button>
              </Left>
            <Body><Image  style={{ marginTop: 20,backgroundColor: 'white' }} source={IMAGE.ICON_MENU2} style={{ height:35,width:125 }}/></Body>
            <Right>
            </Right>
          </Header>
      <View style={{ marginLeft: 15,flex: 1,fontFamily:'Tageblatt Picto', flexDirection: 'column',  justifyContent: 'center',alignItems: 'flex-start' }}>

--------------
------------
----------

  <List  style={{marginBottom:50}}
              dataArray={links}
          renderItem={({item})=>{
              return (
                        <ListItem style={{marginLeft: 0}} noBorder>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('ArticleLink',item)} style={{flexDirection:'row'}} activeOpacity={0.5}>
                        <Text  numberOfLines={3} style={{fontSize: 16 }} numberOfLines={2}>{`\u25A0 ${item.title}`}</Text>
                            </TouchableOpacity>
                      </ListItem>
                    )
              }} />

标签： react-native

您可以通过向您的ScrollView

<ScrollView ref={(ref) => { this.scrollView = ref; }}>

当您按下链接时，您应该致电

this.scrollView.scrollTo(0)

react-native - 单击链接后滚动到顶部反应本机

问题描述

解决方案

推荐阅读