反应原生 - 有办法隐藏/显示另一个页面中的项目？
Posted
技术标签:
【中文标题】反应原生 - 有办法隐藏/显示另一个页面中的项目？【英文标题】：react native- there is way to hide/show an item in another page? 【发布时间】：2020-06-07 04:14:09 【问题描述】：我尝试隐藏\显示tableHead3: ['BANANA']，它位于“InfoTable”屏幕上，方法是标记“BOB”复选框（在中找到）”设置屏幕”。
我是 react native 的新手，我不知道 redux。
有人可以告诉我如何以简单的方式使用我的示例吗？
这是“OrderInformationScreen”
export default class OrderInformationScreen extends Component
constructor(props)
super(props);
const state = props.navigation;
this.state =
title: state.params.data //navprops.params.data.SHORT_TEXT
//alert(JSON.stringify((state.params.data.SHORT_TEXT)))
render()
return (
<>
<View
style=
alignItems: 'flex-start',
justifyContent: 'center',
borderColor: 'blue',
flexDirection: "row",
justifyContent: 'space-evenly'
>
<TouchableOpacity onPress=() => console.log("cancel!")>
<Avatar
size='large'
containerStyle= marginTop: 30
activeOpacity=0.2
rounded
source=require('../assets/down.png') style= height: 80, width: 80
onPress=() => console.log("cancel!") />
<View >
<Text style= fontSize: 25, fontWeight: 'bold', color: 'red' >לדחות</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress=() => console.log("works!")>
<Avatar
size='large'
activeOpacity=0.1
rounded
source=require('../assets/up.png') style= height: 80, width: 80
onPress=() => console.log("Works!") />
<View>
<Text style= fontSize: 25, fontWeight: 'bold', color: 'green', marginHorizontal: 6 >לאשר</Text>
</View>
</TouchableOpacity>
</View>
<InfoTable headerInfo=this.state.title></InfoTable>
</>
);
;
这是 StackNavigator：
const PlacesNavigator = createStackNavigator(
Main: MainScreen,
MyTasks: MyTasksScreen,
Settings: SettingsScreen,
Sync: SyncScreen,
Info: OrderInformationScreen
,
defaultNavigationOptions:
headerStyle:
animationEnabled: true,
backgroundColor: Platform.OS === 'android' ? Colors.primary : ''
,
headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
);
export default createAppContainer(PlacesNavigator);
这是“设置屏幕”
import React, useState, useEffect from 'react';
import View, Text from 'react-native';
import CheckBox from 'react-native-elements';
const SettingsScreen = props =>
const [checked1, setChecked1] = useState(null);
const [checked2, setChecked2] = useState(null);
const [checked3, setChecked3] = useState(null);
const [checked5, setChecked5] = useState(null);
const [checked6, setChecked6] = useState(null);
const [checked7, setChecked7] = useState(true);
const [checked8, setChecked8] = useState(null);
const handlePress = title =>
if (title === 'LION') //6
setChecked6(true), setChecked7(false), setChecked8(false)
else if (title === 'ZEBRA') //7
setChecked7(true), setChecked6(false), setChecked8(false)
else
setChecked8(true), setChecked7(false), setChecked6(false)
useEffect(() =>
setChecked7(true)
, [])
return (
<View>
<CheckBox
iconLeft
checkedColor='red'
title="LIZARD"
checked=checked1
onPress=() => setChecked1(prev => !prev)
/>
<CheckBox
iconLeft
checkedColor='red'
title="BIRD"
checked=checked2
onPress=() => setChecked2(prev => !prev)
/>
<CheckBox
iconLeft
checkedColor='red'
title="SNAKE"
checked=checked3
onPress=() => setChecked3(prev => !prev)
/>
<CheckBox
iconLeft
checkedColor='red'
title="SOUND"
checked=checked5
onPress=() => setChecked5(prev => !prev)
/>
<CheckBox
iconLeft
checkedColor='green'
title='LION'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked=checked6
onPress=() => handlePress('LION')
/>
<CheckBox
iconLeft
checkedColor='green'
title='ZEBRA'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked=checked7
onPress=() => handlePress('ZEBRA')
/>
<CheckBox
iconLeft
checkedColor='green'
title='BOB'
checkedIcon='dot-circle-o'
uncheckedIcon='circle-o'
checked=checked8
onPress=() => handlePress('BOB')
/>
</View>
);
;
SettingsScreen.navigationOptions =
headerTitle: 'SETTINGS'
;
export default SettingsScreen;
这是“信息表”：
import React, Component from 'react';
import StyleSheet, View, ScrollView from 'react-native';
import Table, Row, Rows from 'react-native-table-component';
import Swiper from 'react-native-swiper'
export default class InfoTable extends Component
constructor(props)
super(props);
this.state =
tableHead0: [`$this.props.headerInfo.SHORT_TEXT ($(this.props.headerInfo.ORDERID).replace(/^0+/, ''))`],
tableHead3: ['BANANA'],//THIS I WANT HIDE AND SHOW
tableData3: [
['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.SETTLORDER_TXT ($this.props.headerInfo.SETTLORDER)`],
]
componentWillReceiveProps(nextProps)
if (nextProps.headerInfo != null)
this.setState( tableHead0: [nextProps.headerInfo] )
alert(JSON.stringify(nextProps))
render()
const state = this.state;
return (
<Swiper style=styles.wrapper showsButtons=true>
<ScrollView>
<View style=styles.container>
<Table borderStyle= borderWidth: 2, borderColor: '#d83dff' >
<Row data=state.tableHead0 style=styles.head0 textStyle=styles.headText />
<Row data=state.tableHead3 style=styles.head textStyle=styles.headText />
<Rows data=state.tableData3 textStyle=styles.text />
</Table>
</View>
</ScrollView>
</Swiper>
)
const styles = StyleSheet.create(
container: flex: 1, backgroundColor: '#fff' ,
head0: height: 80, backgroundColor: '#54beff' ,
head: height: 40, backgroundColor: '#9febf5' ,
headText: fontWeight: 'bold', fontSize: 20 ,
text: margin: 10 ,
);
【问题讨论】：
您可以使用本地异步存储来更新值，然后相应地自定义视图。 你能告诉我怎么做吗？ 试试这个文档facebook.github.io/react-native/docs/asyncstorage，关于如何使用异步存储 【参考方案1】：在设置屏幕中使用AsyncStorage 保存选中的收音机的值并检索InfoTable 中的值。
在存储中保存价值。
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
;
在SettingsScreen中修改handlePress
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);
;
在您的渲染中，从状态中获取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>
);
;
DEMO
【讨论】：
“钥匙”是什么意思？我需要写什么呢？key 是数组中的项目 => tableHead0`, tableHead3, tableData3
我有点困惑，例如，如果我想隐藏/显示tableHead3: ['BANANA'],，请显示此更改的回报
你看到演示了吗？
是的，我看到了，但我不明白如果我想控制tableHead3: ['BANANA']，我应该在返回函数中更改什么@【参考方案2】：
我建议学习 MobX 或 Redux。 这是最简单的方法，迟早你会想要全局控制你的状态
【讨论】：
以上是关于反应原生 - 有办法隐藏/显示另一个页面中的项目？的主要内容，如果未能解决你的问题，请参考以下文章