React Native - 如何訪問Refs？

我試圖訪問this.refs，所以我可以滾動到平面列表的頂部，但它是未定義的。React Native - 如何訪問Refs？

我的渲染方法是這樣的：

render() { 
    return (
     <View style={styles.container}> 
     { this.state.loading && 
      <ActivityIndicator /> 
     } 
     { !this.state.loading && 
      <FlatList 
      ref='flatList' 
      data={this.state.facebookPosts} 
      onEndReachedThreshold={0} 
      onEndReached={({ distanceFromEnd }) => { 
       this._getFacebookPosts(this.state.nextPost); 
      }} 
      renderItem={({item}) => <FacebookPost 
       date={item.created_time} 
       message={item.message} 
       image={item.attachments.data[0].media.image.src} 
       url={item.link} 
      />} 
      /> 
     } 
     </View> 
    ) 
    } 
}

正如你所看到的，我有裁判設置爲「flatList」。

然後我有一個標籤欄，當你點擊其中一個標籤時，它是爲了滾動到列表的頂部。（我想只是不安慰註銷this.refs但要未定義）

static navigationOptions = { 
    tabBarLabel: 'News', 
    showIcon: true, 
    tabBarIcon: ({ tintColor }) => (
     <Image 
     source={require('../assets/images/newspaper-icon.png')} 
     style={[styles.icon, {tintColor: tintColor}]} 
     /> 
    ), 
    tabBarOnPress: (scene, jumpToIndex) => { 
     // this.refs.listRef.scrollToOffset({x: 0, y: 0, animated: true}) 
     console.log(this.refs); 
     jumpToIndex(scene.index); 
    } 
    };

什麼我需要做的不同，以獲得this.refs到onTabBarPress函數內部不能是未定義？

來源

2017-09-27 Tenatious

https://facebook.github.io/react/docs/refs-and -the-dom.html – euvl

@euvl是的，這不會幫助我。我已經讀過 – Tenatious

，如果你嘗試使用'ref = {flatList => this.flatList = flatList}'並且在你的函數中使用'this.flatList'，它是否會起作用？ –

在我的選擇中，您只能訪問屬於同一類的參考。你做你想做的事情，但使用componentDidMount當它掛載你滾動列表

來源

2017-09-27 15:26:40

組件不會在選項卡更改中卸載，因此我不能每次都在componentDidMount上觸發某些內容。 – Tenatious

@Tenatious正在使用像Redux或Mobx這樣的狀態管理器？您可以檢查導航狀態，如果它是您想要在'componentWillReceiveProps'上滾動的選項卡。我不太確定，但每次標籤移動時都會觸發'componentDidMount'。 –

看來，你正試圖訪問一個靜態屬性內的類實例的一個屬性，該靜態屬性對該實例一無所知。靜態屬性綁定到class而不是類實例，因此它們的this關鍵字不是對類實例的引用。

看起來你正在使用react-navigation，所以你可以在componentDidMount這樣破解實例（this）到您的靜態navigationOptions財產。

componentDidMount() { 
    this.props.navigation.setParams({ instance: this }); 
}

然後你就可以定義爲navigationOptions這樣的功能，可以訪問到您的導航PARAMS。

static navigationOptions = ({ navigation }) => ({ 
    tabBarLabel: 'News', 
    showIcon: true, 
    tabBarIcon: ({ tintColor }) => (
    <Image 
     source={require('../assets/images/newspaper-icon.png')} 
     style={[styles.icon, {tintColor: tintColor}]} 
    /> 
), 
    tabBarOnPress: (scene, jumpToIndex) => { 
    navigation.state.params.instance.refs.listRef.scrollToOffset({x: 0, y: 0, animated: true}) 
    jumpToIndex(scene.index); 
    } 
});

這可能不是最好的方式，但它是方式來完成它。

來源

2017-09-27 16:03:45 jasonmerino

在你的代碼的問題是

裁判需要一個功能而不是一個字符串
scrollToOffset不使用的x，y作爲參數。如果您想滾動到某個索引，請改用scrollToIndex。
綁定清爽isLoading優於注入你FlatList裝載

後，下面的代碼應工作：

class MyListView extends React.Component { 
    _listRef; 
    ... 

    render() { 
    return (
     <View> 
      <FlatList 
      ref={ref => {this._listRef = ref; }} 
      data={this.state.facebookPosts} 
      renderItem={({item}) => <FacebookPost 
       date={item.created_time} 
       message={item.message} 
       image={item.attachments.data[0].media.image.src} 
       url={item.link} 
      />} 
      ... 
      refreshing={this.state.loading} 
      /> 
     } 
     </View> 
    ) 
    } 

    scrollToIndex = (idx) => { 
    this._listRef.scrollToIndex({ index: idx, animated: true }); 
    } 
}

來源

2018-01-31 23:54:35 FisNaN

React Native - 如何訪問Refs？

回答

相關問題