Javascript react native-是否有办法在另一个页面中隐藏/显示项目？

我试图隐藏\显示

表格头3:['BANANA']

，它位于的“InfoTable”屏幕上，方法是标记的“BOB”复选框，该复选框位于的“SettingsScreen”中。 我是新来的，我不知道redux。 有人可以告诉我如何用一种简单的方式来做我的例子吗

这是“订单信息屏幕”

这是“设置屏幕”

import React，{useState，useffect}来自“React”；
从“react native”导入{View，Text}；
从“react native elements”导入{CheckBox}；
常量设置屏幕=道具=>{
常量[checked1，setChecked1]=useState（null）；
常量[checked2，setChecked2]=useState（null）；
常量[checked3，setChecked3]=useState（null）；
const[checked5，setChecked5]=useState（null）；
常量[checked6，setChecked6]=useState（null）；
const[checked7，setChecked7]=useState（true）；
常量[checked8，setChecked8]=useState（null）；
const handlePress=标题=>{
如果（标题==='LION'）{//6
setChecked6（真）、setChecked7（假）、setChecked8（假）
}else if（title==='ZEBRA'）{//7
setChecked7（真）、setChecked6（假）、setChecked8（假）
}否则{
setChecked8（真）、setChecked7（假）、setChecked6（假）
}
}
useffect（（）=>{
setChecked7（真）
}, [])
返回(
setChecked1（prev=>！prev）}
/>
setChecked2（prev=>！prev）}
/>
setChecked3（prev=>！prev）}
/>
setChecked5（prev=>！prev）}
/>
女手（‘狮子’）}
/>
女手（‘斑马’）}
/>
手按（'BOB'）}
/>
);
};
设置Screen.navigationOptions={
标题：“设置”
};
导出默认设置屏幕；

这是“信息表”：

import React，{Component}来自'React'；
从“react native”导入{StyleSheet，View，ScrollView}；
从“react native Table component”导入{Table，Row，Rows}；
从“react native Swiper”导入Swiper
导出默认类InfoTable扩展组件{
建造师（道具）{
超级（道具）；
此.state={
tableHead0:[`${this.props.headerInfo.SHORT_TEXT}（${（this.props.headerInfo.ORDERID）.replace（/^0+/，“”）}）`，
tableHead3:['BANANA']，//这是我想要隐藏和显示的
表3：[
['APPLE'，`${this.props.headerInfo.COSTCENTER_TXT}（${（this.props.headerInfo.COSTCENTER）}）`，
['MONKEY'，`${this.props.headerInfo.LOC_WBS_ELEM_TXT}（${this.props.headerInfo.LOC_WBS_ELEM}）`，
['FRIZ'，`${this.props.headerInfo.settleOrder_TXT}（${this.props.headerInfo.settleOrder}）`，
]
}
}
组件将接收道具（下一步）{
if（nextrops.headerInfo！=null）{
this.setState（{tableHead0:[nextrops.headerInfo]}）
}
警报（JSON.stringify（nextrops））
}
render（）{
const state=this.state；
返回(
)
}
}
const styles=StyleSheet.create({
容器：{flex:1，背景色：'#fff'}，
head0:{高度：80，背景色：'#54beff'}，
头部：{高度：40，背景颜色：'#9febf5'}，
标题文本：{fontWeight:'bold'，fontSize:20}，
正文：{页边空白：10}，
});

在设置屏幕中使用保存选中收音机的值，并在

信息表中检索值

在存储中保存价值

import {
 AsyncStorage,
 ...
} from 'react-native';

//save value in storage
const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    // Error saving data
  }
};

// retrieve value
retrieveData = async key => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      // We have data!!
      return value;
    }
  } catch (error) {
    // Error retrieving data
  }
};

在设置屏幕中修改手按

const handlePress = title => {
  if (title === 'LION') {
    //6
    setChecked6(true), setChecked7(false), setChecked8(false);

    // remove key from storage
    AsyncStorage.removeItem('checkbox').catch(e => console.log(e));
  } else if (title === 'ZEBRA') {
    //7
    setChecked7(true), setChecked6(false), setChecked8(false);
    // remove key from storage
    AsyncStorage.removeItem('checkbox').catch(e => console.log(e));
  } else {
    setChecked8(true), setChecked7(false), setChecked6(false);
    // add key to storage
    storeData('checkbox', 'tableHead3').catch(e => console.log(e));
  }
};

在InfoTable中，从存储中获取值

state = {
  checkBoxKey: '', // used to store value from storage
  // I've added new object to store all the table data
  tableData: {
  tableHead0: [`${'SHORT_TEXT'} (${'ORDERID'})`],
  tableHead3: ['BANANA'], //THIS I WANT HIDE AND SHOW
  tableData3: [
    ['APPLE', `${'COSTCENTER_TXT'} (${'COSTCENTER'})`],
    ['MONKEY', `${'LOC_WBS_ELEM_TXT'} (${'LOC_WBS_ELEM'})`],

    ['FRIZ', `${'SETTLORDER_TXT'} (${'SETTLORDER'})`],
  ],
},
}

componentDidMount = async () => {
  try {
    const data = await this.retrieveData('checkbox');

    if (data) {
      this.setState(
        {
          checkBoxKey: data,
        },
        () => console.log(this.state.checkBoxKey)
      );
    }
  } catch (e) {
    console.log(e);
  }
};

在渲染中，从state获取
checkBoxKey
，并使用它过滤表数据

render = () => {
  const state = this.state;
  const tableData = state.tableData;

  const displayKeys = Object.keys(tableData).filter(key => {
    return key !== this.state.checkBoxKey;
  });

  return (
    <Swiper style={styles.wrapper} showsButtons={true}>
      <ScrollView>
        <View style={styles.container}>
          <Table borderStyle={{ borderWidth: 2, borderColor: '#d83dff' }}>
            {displayKeys &&
              displayKeys.map(key =>
                this.is2dArray(tableData[key]) ? (
                  <Rows data={tableData[key]} textStyle={styles.text} />
                ) : (
                  <Row data={tableData[key]} textStyle={styles.text} />
                )
              )}
          </Table>
        </View>
      </ScrollView>
    </Swiper>
  );
};

render=（）=>{
const state=this.state；
const tableData=state.tableData；
const displayKeys=Object.keys（tableData）.filter（key=>{
return key！==this.state.checkBoxKey；
});
返回(
{显示键&&
displayKeys.map（key=>
这个.is2dArray（tableData[key]）(
) : (
)
)}
);
};

在设置屏幕中使用保存选中收音机的值并在
信息表中检索值

在存储中保存价值

import {
 AsyncStorage,
 ...
} from 'react-native';

//save value in storage
const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (error) {
    // Error saving data
  }
};

// retrieve value
retrieveData = async key => {
  try {
    const value = await AsyncStorage.getItem(key);
    if (value !== null) {
      // We have data!!
      return value;
    }
  } catch (error) {
    // Error retrieving data
  }
};

在设置屏幕中修改手按

const handlePress = title => {
  if (title === 'LION') {
    //6
    setChecked6(true), setChecked7(false), setChecked8(false);

    // remove key from storage
    AsyncStorage.removeItem('checkbox').catch(e => console.log(e));
  } else if (title === 'ZEBRA') {
    //7
    setChecked7(true), setChecked6(false), setChecked8(false);
    // remove key from storage
    AsyncStorage.removeItem('checkbox').catch(e => console.log(e));
  } else {
    setChecked8(true), setChecked7(false), setChecked6(false);
    // add key to storage
    storeData('checkbox', 'tableHead3').catch(e => console.log(e));
  }
};

在InfoTable中，从存储中获取值

state = {
  checkBoxKey: '', // used to store value from storage
  // I've added new object to store all the table data
  tableData: {
  tableHead0: [`${'SHORT_TEXT'} (${'ORDERID'})`],
  tableHead3: ['BANANA'], //THIS I WANT HIDE AND SHOW
  tableData3: [
    ['APPLE', `${'COSTCENTER_TXT'} (${'COSTCENTER'})`],
    ['MONKEY', `${'LOC_WBS_ELEM_TXT'} (${'LOC_WBS_ELEM'})`],

    ['FRIZ', `${'SETTLORDER_TXT'} (${'SETTLORDER'})`],
  ],
},
}

componentDidMount = async () => {
  try {
    const data = await this.retrieveData('checkbox');

    if (data) {
      this.setState(
        {
          checkBoxKey: data,
        },
        () => console.log(this.state.checkBoxKey)
      );
    }
  } catch (e) {
    console.log(e);
  }
};

在渲染中，从state获取
checkBoxKey
，并使用它过滤表数据

render = () => {
  const state = this.state;
  const tableData = state.tableData;

  const displayKeys = Object.keys(tableData).filter(key => {
    return key !== this.state.checkBoxKey;
  });

  return (
    <Swiper style={styles.wrapper} showsButtons={true}>
      <ScrollView>
        <View style={styles.container}>
          <Table borderStyle={{ borderWidth: 2, borderColor: '#d83dff' }}>
            {displayKeys &&
              displayKeys.map(key =>
                this.is2dArray(tableData[key]) ? (
                  <Rows data={tableData[key]} textStyle={styles.text} />
                ) : (
                  <Row data={tableData[key]} textStyle={styles.text} />
                )
              )}
          </Table>
        </View>
      </ScrollView>
    </Swiper>
  );
};

render=（）=>{
const state=this.state；
const tableData=state.tableData；
const displayKeys=Object.keys（tableData）.filter（key=>{
return key！==this.state.checkBoxKey；
});
返回(
{显示键&&
displayKeys.map（key=>
这个.is2dArray（tableData[key]）(
) : (
)
)}
);
};

我建议学习MobX或Redux。
这是最简单的方法，你迟早会想在全球范围内控制你的状态
我建议你要么学习MobX，要么学习Redux。
这是最简单的方法，您迟早会希望全局控制您的状态
您可以使用本地异步存储更新值，然后相应地自定义视图。您能告诉我怎么做吗？试试这个文档，关于如何使用异步存储您可以使用本地异步存储更新值和