Question

在DetailFamilyScreen中并按下ListItem时，其他家庭成员将移动到具有不同参数的同一DetailFamilyScreen 在DetailFamilyScreen上时如何切换到DetailFamilyScreen页面

const DetailFamilyScreen = ({ navigation }) => {
const item = navigation.state.params.item;

const [loading, setLoading] = useState(false);
const [result, setResult] = useState([]);

const getResult = async id => {
    setLoading(true)
    const response = await server.get(`/person/${item._id}`)
      .then((response) => {
        setResult(response.data);
        console.log(response.data)
        setLoading(false)
      }, (error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    getResult();
  }, []);

return (
    <View style={styles.container}>
            <Button title='Add Member' onPress={() => {navigation.navigate('AddPerson', { item:item })}} />
            <FlatList
                showsVerticalScrollIndicator={false}
                data={result}
                keyExtractor={(person) => person._id}
                renderItem={({ item }) => {
                return (
                    <ListItem
                        title={item.name}
                        subtitle={item._id}
                        bottomDivider
                        chevron
                        onPress={() => navigation.navigate('DetailFamilyScreen', { item:item })}
                    />
                );
                }}
            />
    </View>
);}

image

Answer 1

如果我了解您要正确执行的操作，则认为更新您的状态而不是调用导航更为有意义。

因此您可以执行以下操作：

const DetailFamilyScreen = ({navigation, route}) => {
  const [item, setItem] = useState(route.params?.item);
  
  useEffect(() => {
    getResult();
  }, [item]);

  // ...
  onPress={() => {
    setItem(item);
  }}
  // ...

如果需要，您还可以设置默认值：

route.params?.someParam ?? {name: "test", etc...};

因此组件将重新渲染新项目，而您的getResult将使用新项目来设置result。

Answer 2

不确定真正要做什么，但是如果要使用新参数导航到同一屏幕，则必须使用navigation.push而不是navigation.navigate（https://reactnavigation.org/docs/navigating/）。

将本地移动屏幕反应为活动屏幕

2 个答案: