按钮不在视图中显示

时间:2019-07-04 09:12:42

标签: react-native flexbox

为什么我可以将ButtonRadioGroup的底部对齐?

 <View
        style={{
          height: 200,
          padding: 12
        }}
      >
        <Text style={{ fontSize: 16, color: "#fff", textAlign: "right" }}>
          {this.props.current + 1} out of 10
        </Text>
        <Text style={{ fontSize: 32, fontWeight: "bold", color: "#fff" }}>
          {this.props.question.question}
        </Text>
        <RadioGroup
          onSelect={(index, answer) => onSelect(answer)}
          selectedIndex={null}
        >
          {this.renderOptions(question)}
        </RadioGroup>
        <TouchableHighlight
          style={{
            height: 40,
            width: 160,
            borderRadius: 10,
            backgroundColor: "yellow",
            marginLeft: 50,
            marginRight: 50,
            marginTop: 20
          }}
        >
          <Button
            title="Submit Answer"
            color="#fff"
            onPress={() => {
              this.props.onSelect(this.state.answer);
            }}
          />
        </TouchableHighlight>
      </View>

2 个答案:

答案 0 :(得分:0)

有一个<View style={{flexDireaction: "row"}}><View>content radio group</View><View>content button</View> </View>尝试将其包装在视图中并添加样式: position: 'absolute', right: 0, bottom: 0flex: 1, flexDirection: 'column-reverse'

答案 1 :(得分:0)

该按钮未显示,因为您在height的父级中有固定的<View>,并且按钮的位置大于200高度。尝试增加父级的height,或将其删除并添加flex: 1