javascript - react native -有办法隐藏/显示另一个页面中的项目吗？

Question

我尝试通过标记“BOB”复选框来隐藏\显示“InfoTable”屏幕上的tableHead3:['BANANA'] 位于“SettingsScreen”中。我是 React Native 的新手，我不知道 Redux。有人可以告诉我如何用我的例子以简单的方式做到这一点吗？

this is the "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>
            </>
        );
    };
}

this is the 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);

this is the "SettingsScreen"

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;

this is the "InfoTable" :

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 },
});

Answer 1

使用AsyncStorage在设置屏幕中保存选中的单选按钮的值并在 InfoTable 中检索该值。

节省存储值(value)。

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