时间戳

首页 > 解决方案 > react native：当我从另一个页面单击按钮时，如何更改视图？

javascript - react native：当我从另一个页面单击按钮时，如何更改视图？

问题描述

当我从另一个页面按下按钮并且再次按下按钮时，我想更改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>
}

标签： javascriptreactjsreact-native

解决方案

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

这是一个例子：https ://snack.expo.io/@ashwith00/humilied-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 && (
            <View style={{ width: 200, height: 100, backgroundColor: 'red' }} />
          )}
        </View>
      </ScrollView>
    </>
  );
};

推荐阅读