Position(Absolute)

박윤수·2023년 4월 6일
0

React Native

목록 보기
3/3

오늘 react native로 화면을 구성하는데
1가지 계속 애를 먹었다..
그것은...react-native-paper에서 제공하는 FAB.Group 버튼이다.

예를들면,

 <View style={styles.buttonContainer}>
    <View style={styles.buttonType}>
       		<Text></Text>
    </View>

 	<View style={styles.buttonType}> 
       		<Text>생활</Text>   
    </View>
    
    <View style={styles.buttonType}>
       		<Text>제테크</Text> 
    </View>

 <Portal>
     <FAB.Group 
          open={this.state.open}
          icon={'menu'}
          actions={[
          {icon: require('../assets/images/menu.png'), label:'Menu', 				onPress: () => console.log('Pressed add')}
            ]}
            onStateChange={({ open }) => this.setState({ open })}
            onPress={() => {this.setState({open: !this.state.open})}}
            style={{position: 'absolute', top: 50, left: 0}}
            />
  </Portal>

</View>
        

이렇게 되면 스롤뷰에의해 버튼이 밖으로 밀려나가게 된다.
나는 이 버튼을 아예 화면에 고정하고 싶은데...독학을 하다보니..방법을 잘 모르겠어서 거진 30분을 뒤져본 것 같다...

열심히 구글링 하던 찰나 내 속을 시원하게 긁어주는 글을 찾았다..

바로 position을 absolute로 바꿔주면 된다...왜 이걸 해매고 있었을까....

그래도 오늘 이렇게 또 한가지를 해결 했다!

0개의 댓글