如何使元素始终位于屏幕右上角

Question

我正在尝试使具有 style={styles.settingsButtonContainer} 的元素不依赖于视图中其他元素的位置，而是始终位于屏幕的右上角。我正在尝试这样：

<View style={styles.container}>
  <RCActivityIndicator animating={showActivityIndicator} />
  <RCModal title={alertTitle} visible={alertVisible} onButtonPress={alertOnPress} />
  <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
    <Text style={styles.title}>Noughts and Crosses</Text>
    <Text style={styles.tip}>Get {winCondition()} in row, column or diagonal</Text>
    <TouchableHighlight underlayColor="#000000" style={[styles.button, styles.newGameButton]} onPress={setInitialFieldState}>
      <Text style={styles.buttonText}>New game</Text>
    </TouchableHighlight>
    <Text style={styles.turnContainer}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text>
    <Field state={fieldState} size={fieldSize} winner={winCombination} onCellPress={onCellPress} />
  </ScrollView>
  <View style={styles.settingsButtonContainer}>
    <TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}>
      <Image source={require('../img/settings.png')} style={styles.settingsIcon} />
    </TouchableHighlight>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  title: {
    textAlign: 'center',
    fontSize: 33,
    fontFamily: theme.fonts.primary,
    color: theme.colors.text
  },
  button: {
    alignItems: 'center',
    padding: 5,
    margin: 5,
    marginLeft: 10,
    marginRight: 10,
    borderRadius: 20,
    height: 35,
    justifyContent: 'center'
  },
  newGameButton: {
    backgroundColor: theme.colors.primary,
    paddingLeft: 15,
    paddingRight: 15,
  },
  buttonText: {
    fontSize: 25,
    fontFamily: theme.fonts.primary,
    color: theme.colors.text
  },
  tip: {
    textAlign: 'center',
    fontSize: 25,
    marginLeft: 10,
    marginRight: 10,
    fontFamily: theme.fonts.primary,
    color: theme.colors.text
  },
  turnContainer: {
    textAlign: 'center',
    fontSize: 33,
    fontFamily: theme.fonts.primary,
    color: theme.colors.text,
    marginLeft: 10,
  },
  turn: {
    fontSize: 30,
    fontFamily: theme.fonts.noughtsAndCrosses,
  },
  privacy: {
    textAlign: 'center',
    color: theme.colors.secondaryText,
    fontSize: 15,
    textDecorationLine: "underline",
    marginTop: 20
  },
  settingsButtonContainer: {
    position: 'absolute',
    top: 5,
    right: 5,
    height: 50,
    width: 50,
    alignSelf: 'flex-end',
  },
  settingsButton: {
    height: 50,
    width: 50,
    borderRadius: 25,
  },
  settingsIcon: {
    height: 50,
    width: 50
  },
  settings: {
    marginTop: 30
  },
  buttonsContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  }
});

但它只占用一整行，所以 ScrollView 不会占用 100% 的高度。如何让它发挥作用？

Answer 1

尝试包装 settingsButtonContainer

并使用

settingButtonContainerWrapped: {
alignItem: 'flex-end',
flexDirection : 'row',
},

Answer 2

使用css:

.yourelement {
      position: absolute;
      right: 0;
      top: 0;
}

Answer 3

实际上问题出在另一个元素上，它位于 ScrollView 之上 - 是 RCActivityIndicator 占据了这个位置。我设计了样式，效果很好。

如何使元素始终位于屏幕右上角

How to make an element to be always in the top right corner of the screen

javascript

react-native

position

absolute