Блог

Я хочу изменить 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>
}
 

Функция onPress выдаст prop, который дает индекс соответствующей нажатой кнопки переключения, если нажата 1-я кнопка, она дает 0, иначе она дает 1. с помощью этого вы можете переключать представление,

вот пример: https://snack.expo.io/@ashwith00/humiliated-bacon

 
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 amp;amp; (
            <View style={{ width: 200, height: 100, backgroundColor: 'red' }} />
          )}
        </View>
      </ScrollView>
    </>
  );
};