视图底部中心的中心按钮

Question

我正在尝试将下一个按钮置于页面底部的中心。它不是位于页面底部，而是位于页面中间。有什么帮助吗？

屏幕截图： Screen Shot

export default class Type extends Component {
    constructor(props) {
        super(props)

        this.state = {
            selected: 'user'
        }
    }

    _select(selected) {
        this.setState({ selected })
    }

    _renderButton(type, photo, width, height, buttonStyles) {
        const { selected } = this.state

        if (selected === type)
            return (
                <TouchableOpacity style={ styles.buttonSelected } onPress={ e => this._select(type) }>
                    <Image source={ photo } style={[ styles.buttonPhoto, buttonStyles ]} width={ width } height={ height } />
                </TouchableOpacity>
            )

        return (
            <TouchableOpacity style={ styles.button } onPress={ e => this._select(type) }>
                <Image source={ photo } style={[ styles.buttonPhoto, buttonStyles ]} width={ width } height={ height } />
            </TouchableOpacity>
        )
    }

    _renderText(text, type, textStyles) {
        const { selected } = this.state

        if (selected === type)
            return <Text style={[ styles.text, styles.textSelected, textStyles ]}>{ text }</Text>

        return <Text style={[ styles.text, textStyles ]}>{ text }</Text>
    }

    render() {

        return (
            <ScrollView style={ styles.container }>
                <Text style={ styles.question }>Who are you?</Text>
                <View style={ styles.buttons }>
                    { this._renderButton('user', boy, 64, 64, { top: 15, left: 20 }) }
                    { this._renderButton('carnival', ticket, 72, 72, { top: 10, left: 15 })}
                </View>
                <View style={ styles.texts }>
                    { this._renderText('Attendee', 'user', { left: -12 }) }
                    { this._renderText('Carnival', 'carnival', { left: 8 }) }
                </View>

                <TouchableOpacity style={ styles.nextButton }>
                    <Text style={ styles.nextText }>
                        Next Step
                    </Text>
                </TouchableOpacity>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  question: {
    paddingTop: '30%',
    textAlign: 'center',
    color: '#ccc',
    fontSize: 24,
    marginBottom: 30
  },
  buttons: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  button: {
    width: width/3,
    height: width/3,
    borderRadius: (width/3)/2,
    borderWidth: 1,
    borderColor: '#e6e6e6',
    marginLeft: 10,
    marginRight: 10
  },
  buttonPhoto: {
    position: 'relative'
  },
  buttonSelected: {
    width: width/3,
    height: width/3,
    borderRadius: (width/3)/2,
    borderWidth: 1,
    borderColor: '#ff9972',
    marginLeft: 10,
    marginRight: 10
  },
  texts: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    paddingTop: 12
  },
  text: {
    width: width/3,
    color: '#b5b5b5',
    textAlign: 'center',
  },
  textSelected: {
    color: '#ff9972'
  },
  nextButton: {
    position: 'absolute',
    left: (width/1.5)/2,
    bottom: 5,
    paddingTop: 10,
    backgroundColor: '#ff6b5d',
    width: width/1.5,
    height: 48,
    borderRadius: 5,
    borderBottomWidth: 2,
    borderBottomColor: '#de5244',
  },
  nextText: {
    fontSize: 16,
    color: '#fff',
    textAlign: 'center'
  }
})

这已经给我带来了几个小时的问题。寻找专业开发人员使用的简单解决方案。

忽略： 看起来您的帖子主要是代码；请添加更多细节。 看起来您的帖子主要是代码；请添加更多细节。 看起来您的帖子主要是代码；请添加更多细节。 看起来您的帖子主要是代码；请添加更多详细信息。

Answer 1

您可以在<View> 内部使用<ScrollView>，而不是使用<ScrollView> 作为父级，并具有类似于以下结构的内容。

<View>
<ScrollView style={{flex:1}}>
{/*All of your screen */}
</ScrollView>
<View>
<TouchableOpacity style={ styles.nextButton }>
                    <Text style={ styles.nextText }>
                        Next Step
                    </Text>
</TouchableOpacity>
</View>
</View>

按钮将始终位于页面底部。