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

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