反应本机：当我单击另一个页面的按钮时，如何更改视图？

Question

当我从另一个页面按下按钮时以及再次按下该按钮时，我想更改SafeAreaView样式，以便它返回SafeAreaView. 我希望得到一些帮助。这是Reshima页面function Reshima({ paramsList = { list: [] } }) {return (      <SafeAreaView style={styles.flat}>        <FlatList          data={filteredList}          renderItem={({ item, index }) => renderItem({ index, item })}          keyExtractor={(item) => item.Water_Source_Code.toString()}          ListEmptyComponent={EmptyListMessage}        />      </SafeAreaView>)}这是AppNavigator按钮的页面：const HomeStack = () => {<TouchableOpacity onPress={() => {                  dispatch(setFilterViewVisible(true));                }}>                  <Icon                    color="white"                    style={styles.homeIcon}                    name={                      Platform.OS === 'android'                        ? 'md-search-outline'                        : 'md-search-outline'                    }                    size={30}                  />                </TouchableOpacity>}

Answer 1

onPress 函数将给出一个 prop，它给出相应的 ToggleButton Pressed 的索引，如果按下第一个按钮，它给出 0，否则它给出 1 通过这个你可以切换视图，

const select_radio_props = [

  { label: 'first', value: 0 },

  { label: 'second', value: 1 },

];

export default () => {

  const [value1, onChangeText1] = React.useState('');

  const [value2, onChangeText2] = React.useState('');

  const [value3, onChangeText3] = React.useState('');

  const [initialRadioForm, setInitialRadioForm] = useState(0);

  const [visible, setVisible] = useState(false);

  return (

    <>

      <ScrollView

        behavior={Platform.OS == 'ios' ? 'padding' : 'height'}

        style={styles.container}>

        <View style={styles.MainScreen}>

          <View style={styles.WhereToCheckTextView}>

            <Text style={styles.WhereToCheckText}>where</Text>

          </View>

          <View style={styles.RadioFormView}>

            <RadioForm

              formHorizontal={true}

              selectedButtonColor="black"

              buttonColor={'black'}

              animation={true}

              labelHorizontal={true}

              labelStyle={{

                fontSize: 18,

                left: 5,

                color: 'black',

              }}

              buttonSize={20}

              radio_props={select_radio_props}

              initial={initialRadioForm}

              onPress={(val) => {

                setVisible(val === 1);

              }}

            />

          </View>

          {visible && (

            <View style={{ width: 200, height: 100, backgroundColor: 'red' }} />

          )}

        </View>

      </ScrollView>

    </>

  );

};