我试图让一个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
}
});
为什么不显示TouchableHighlight
withstyle={styles.settingsButton}
以及如何解决?