如何阻止视图占用屏幕宽度并与 React Native 中的其他组件重叠？

Question

I'm trying to build a react native Note posting application where a user will press a button and a new note will be added to the screen. Each note has a title and a detail. For now, they are being incremented. So first time the user presses the button, a component with 'title 1' and 'detail 1' will be posted as a simple colored square. The problem now is, I want to be able to have a scroll-able view on the whole screen, and at the same time have a button locked on the screen on the bottom right corner that does not move even when we are scrolling through the application.

An example of that is the Gmail app's Button for sending an email. Gmail

And this is my App, and the red Touchable opacity "Add Note." adds components.

Before adding notes:

Before adding

After adding notes:

After adding

How do I place the "Add Note." button at the right lower corner of the screen and lock it so that it doesn't move even when the components in FlatList Surpasses the screen.

My Code:`

const IndexScreen = () => {
    const {state, addNote } = useContext(Context);
    return <View style={styles.Container}>
      <ScrollView>
          <FlatList
            data={state}
            keyExtractor={Note => Note.title}
            renderItem={({item}) => {
              return (item.note)
            }}
          />
          <TouchableOpacity style={styles.Note} onPress={addNote}>
            <Text>Add Note!</Text>
          </TouchableOpacity>
      </ScrollView>
    </View>
};

const styles = StyleSheet.create({
    Container: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        borderWidth : 2,
        borderColor: 'black',
    },
    Note: {
      height: 100,
      width: 100,
      borderWidth : 2,
      borderColor: 'yellow',
      alignSelf: 'flex-end',
      backgroundColor: 'red',
      flex: 1

    }
  });

`

Answer 1

Not 100% sure, but you can try setting the position: absolute and then setting right and bottom properties too, so it then becomes fixed.

Answer 2

How do I place the "Add Note!" button at the right lower corner of the screen and lock it so that it doesn't move even when the components in FlatList Surpasses the screen

You can use absolute positioning. Like this:

Note: {
  height: 100,
  width: 100,
  borderWidth : 2,
  borderColor: 'yellow',
  backgroundColor: 'red',
  position: "absolute",
  bottom: 0,
  right: 0
}

I added position , left and right properties.

Answer 3

Try react-native-action-button. It will look great and at the same time your issue will be resolved. Here is the link .

Answer 4

react-native-floating-action should do the trick. https://www.npmjs.com/package/react-native-floating-action