小编Har*_*son的帖子

我对编程一般还是比较陌生的，甚至对 JS 和 React(Native) 也比较新，但我已经为此工作了一整天，但我仍然没有弄清楚，所以我求助于 Stack Overflow，希望有人可以帮我。

基本上我想要完成的是将 other 设置Components为App组件的子级，因为我希望他们能够访问我将在stateof 中设置的信息App。然而，与此同时，我也使用react-navigation创造底部导航栏，因此我对我如何能通过不知道props的App这些其他的Components，如ExplorePage这是代表其他的成分children components。

应用程序

import React from 'react';
import ExplorePage from './app/tabs/ExplorePage';
import {createBottomTabNavigator} from 'react-navigation';

...other imports

class App extends React.Component {

  state = {
      parentState: 'testing testing',
    }

}

const MainScreenNavigator = createBottomTabNavigator(
  {
    Home: {screen: ExplorePage},
    Search: {screen: SearchPage},
    Favorites: {screen: FavoritesPage},
  }
);


export default MainScreenNavigator;

ExplorePage，就像 …

我已经查看了许多文档和示例，但我似乎仍然不太明白如何forwardRef在 React Native 中使用带有 TypeScript 的功能组件。下面是一个示例，我MyCustomComponent使用自定义函数创建一个，我尝试通过创建引用从父级调用该函数。但是，由于 ref 定义不正确null，我显然收到一条错误消息，告诉我该函数不存在。请帮助我了解如何forwardRef在 React Native 中正确使用。提前致谢！

interface MyCustomComponentProps {
  title: string
}

const MyCustomComponent: React.FunctionComponent<MyCustomComponentProps> = React.forwardRef((props, ref) => {
  const coolAlert = () => {
    Alert.alert('Hey!', 'This was called from MyCustomComponent')
  }
  return (
    <View>
      <Text>{props.title}</Text>
    </View>
  )
})

export default function App () {
  const MyCustomComponentRef = useRef()
  return (
    <SafeAreaView>
      <MyCustomComponent ref={MyCustomComponentRef} title='Hello World' />
      <TouchableOpacity
        onPress={() => {
          MyCustomComponentRef.coolAlert()
        }}>
        <Text>Click Me</Text>
      </TouchableOpacity> …

编辑：我讨厌谷歌搜索答案，并且发现一些十年前从未解决过的问题，所以我为可能想知道的人回答自己的问题。就我而言，我只是禁用bounces了滚动视图的道具。由于FlatList扩展了React的ScrollView，因此在我创建的动画FlatList组件中将设置bounces为可以false阻止它弹起并解决了我的问题。祝你今天愉快。

希望您过得愉快。我正在尝试动态设置标题的动画，但是由于某种原因，每当我滚动到滚动视图的开始或结尾之外时，反弹效果就会与Animation混淆。（如下面的gif所示）

GIF

GIF相同但分辨率更高

如您所见，当我滚动到顶部并启用bounce动画时，页眉认为我正在向下滚动，因为bounce将列表中的第一个元素返回顶部。我该如何解决？我在网上某处看到，向动画值添加插值器会有所帮助，尽管我不太了解。下面是我的代码。谢谢

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)

const tempArray = [
  ...(an array of my data)
]

export default class TempScreen extends React.Component {
  static navigationOptions = {
    header: null
  }

  constructor(props) {
    super(props)
    this.state = {
      animatedHeaderValue: new Animated.Value(0),
    }
  }

  render() {
    const animatedHeaderHeight = Animated.diffClamp(this.state.animatedHeaderValue, 0, 60)
      .interpolate({
        inputRange: [0, 70],
        outputRange: [70, 0],
      })
    return ( <
      View >
      <
      Animated.View style = {
        {
          backgroundColor: 'white',
          borderBottomColor: …