0

我试图让一个TouchableHighlight总是在右上角。我将位置设置为absolute, top 设置为 10 , right 设置为 10 。结构如下:

    <View style={styles.container}>
      <ScrollView onContentSizeChange={() => scrollView.current.scrollToEnd()} ref={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>
        <Text style={styles.title}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text>
        <Field state={fieldState} size={fieldSize} onCellPress={onCellPress} />
        { displaySettings && (
          <View>
            <TouchableHighlight underlayColor="#000000" style={[styles.button, { backgroundColor: '#3498DB' }]} onPress={setInitialFieldState}>
              <Text style={styles.buttonText}>New game</Text>
            </TouchableHighlight>
            <SizeButtons onPress={changeFieldSize} fieldSize={fieldSize} />
            <ModeButtons onPress={changeMode} mode={mode} />
            {mode === MODE_PC && (
              <DifficultyButtons onPress={changeDifficulty} difficulty={difficulty} />
            )}
            <Text style={styles.privacy} onPress={() => Linking.openURL('https://sites.google.com/view/noughts-and-crosses-pp/главная-страница')}>Privacy Policy</Text>
          </View>
        )}
      </ScrollView>
      <TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}>
        <Image source={require('../img/settings.png')} style={styles.settingsIcon} />
      </TouchableHighlight>
    </View>

样式如下:

    const styles = StyleSheet.create({
      //...
      settingsButton: {
        height: 50,
        width: 50,
        borderRadius: 25,
        position: 'absolute',
        top: 10,
        right: 10,
      },
      settingsIcon: {
        height: 50,
        width: 50
      }
    });

为什么不显示TouchableHighlightwithstyle={styles.settingsButton}以及如何解决?

4

0 回答 0