从另一个屏幕添加到平面列表

Question

我在这里尝试做的基本上是通过 selecting 我所做的练习来记录锻炼。所有可用的练习都可以从“练习资源管理器”屏幕select编辑。

在上面提供的图像中，我可以单击训练记录器屏幕中的 + 按钮，它会带我到锻炼浏览器屏幕，我可以在其中 select 一项或多项锻炼，然后会有是点击添加或其他东西的按钮。

这是我目前的代码记录屏幕

const LoggerScreen: React.FC<HomeProps> = ({ navigation }) => {
  var today = new Date().toDateString()
  const [data, setData] = useState<string>('');

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>{today}</Text>

      <Text>X Exercises</Text>

      <Button title='Add' onPress={() => navigation.navigate('Explorer')} />
    </View>
  );
};

export default LoggerScreen

资源管理器屏幕

const Item = ({ item, onPress }) => (
  <Pressable onPress={onPress}>
    <Text>{item.name}</Text>
  </Pressable>
);

const ExplorerScreen: React.FC<HomeProps> = ({navigation}) => {
  
  const renderItem = ({ item }) => {
    return (
      <Item item={item} onPress={() => selectExercise(item.name)} />
    )
  }

  const selectExercise = (name:string) => {
    console.log(name)
    /* selectExercises(name); */
    navigation.navigate('Logger', {name});
  } 
  
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Explorer Screen</Text>

      <FlatList data={DATA} renderItem={renderItem} keyExtractor={(item) => item.id} />
    </View>
  );
};

export default ExplorerScreen

到目前为止，这是我为尝试解决我的问题而调查的资源，但没有奏效。

Passing Data from child to parent component

请随意忽略打字。我目前正在学习 React-Native，我正在慢慢学习如何输入我的屏幕、导航和所有内容。
我知道我可以使用全局存储，但我的目标可能是 select 练习和 return 直接进入日志屏幕状态，然后仅当日志被保存时，它会被保存到每个锻炼日的全局存储中。你怎么看？
如果我使用 navigate() 从资源管理器屏幕（子）到训练记录器（父），它会从堆栈中弹出吗？因为那是 react-navigation documentation recommends.
这更多是关于我的应用程序的未来问题，但是，资源管理器屏幕可以从日志屏幕调用到 select 练习，但它也是练习的存储库探索和学习练习（没有 selection 选项）。我怎么能做到这一点？使用可选道具输入我的屏幕并使用条件渲染？（我还没有研究过这个，请随意忽略）

非常感谢您抽出时间。如果您需要更多信息，请不要犹豫。

Answer 1

在函数 selectExercice 中，我会用选定的练习更新数据库，然后重定向到“记录器”页面。

const selectExercise = (name:string) => {
   /* 
    A call or function that update the database with the selected exercice
    - You will probably have to pass the user as parameter to the function

    database.addExercice(name)
   */

   navigation.navigate('Logger');
}

一旦用户被重定向到“记录器”页面，我将使用 useEffect hook 从数据库中获取练习，然后使用地图函数呈现它们，如下所示：

const LoggerScreen: React.FC<HomeProps> = ({ navigation }) => {
  var today = new Date().toDateString()
  const [data, setData] = useState<string>('');

  useEffect(() => {
    //Get exercices from database
    database.getExercices().then((exercices) => {
      exercices.forEach((exercice) => {
        data.push(exercice);
      });
      /*
        The next line of code is not a necessity but it will help 
        performance. I encourage you to look this up.
      */
      Promise.all(data)
      setData(data)
    })
    document.title = `You clicked ${count} times`;
  });


  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent:'center'}}>
      <Text>{today}</Text>
      {
       data.map((exercice, key) => <Text>{exercice.name}</Text>)
      }

      <Button title='Add' onPress={() => navigation.navigate('Explorer')}/>
    </View>
  );
};

export default LoggerScreen

此代码尚未经过测试，因此可能会出现错误。

如果您没有使用数据库。此解决方案不适合您的需要，但我强烈建议您使用一个。

如果您不想使用数据库，我建议您使用 phone 的 localStorage 和 AsyncStorage 这样的库。严格使用导航历史记录来存储练习不会阻止用户在我退出应用程序时丢失所有数据。

从另一个屏幕添加到平面列表

Add to Flatlist from anoter screen

typescript

react-native

react-navigation

react-props