React Native Element UI ButtonGroup未在Android上显示

Question

以下代码在iOS上运行良好但在Android上无法显示。我使用Genymotion作为模拟器 想知道为什么会出现这种情况？

    renderNext() {
      return(
        <Text>Next<Text>{this.props.next.length > 0 ? ` ${this.props.next.length}` : ""}</Text></Text>
      )
    }


       <ButtonGroup
          selectedIndex={this.state.index}
          buttons={["Past", "Current", this.renderNext()]}
          containerStyle={{height: 50, borderWidth: 0, backgroundColor: 'white', paddingTop: 30, paddingBottom: 30, borderBottomWidth: 1, borderColor: 'lightgray', borderRadius: 0, paddingLeft: 0, marginLeft: 0, paddingRight: 0, marginRight: 0, marginBottom: 0}}
          innerBorderStyle={{width: 0, color: 'white'}}
          textStyle={{fontSize: 18, fontWeight: '600', color: 'lightgray'}}
          selectedTextStyle={{color: "#4cd6a3"}}
          onPress={(selectedIndex) => this.updateIndex(selectedIndex) }
        />

它应该显示在容器的顶部。

Answer 1

我刚刚测试了你的代码，如果我删除 paddingBottom：30 按钮出现在android上，也许你可以使用Platform来确定它是Android还是IOS并设置paddingBottom根据它。 示例Platform.OS === 'ios' ? "paddingBottom: 30" : "the padding the works or empty"

       <ButtonGroup
          selectedIndex={this.state.index}
          buttons={["Past", "Current", this.renderNext()]}
          containerStyle={{height: 50, borderWidth: 0, backgroundColor: 'white', paddingTop: 30, borderBottomWidth: 1, borderColor: 'lightgray', borderRadius: 0, paddingLeft: 0, marginLeft: 0, paddingRight: 0, marginRight: 0, marginBottom: 0}}
          innerBorderStyle={{width: 0, color: 'white'}}
          textStyle={{fontSize: 18, fontWeight: '600', color: 'lightgray'}}
          selectedTextStyle={{color: "#4cd6a3"}}
          onPress={(selectedIndex) => this.updateIndex(selectedIndex) }
        />