Question

我试图让三个按钮采用相同的宽度并拉伸它们，以便它们从屏幕的一端到达另一端。这是我的代码：

   <View style={styles.container}>

    <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
      <View style={styles.button}>
        <Text style={styles.buttonText}>New</Text>
      </View>
    </TouchableHighlight>

    <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
      <View style={styles.button}>
        <Text style={styles.buttonText}>Search</Text>
      </View>
    </TouchableHighlight>

    <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
      <View style={styles.button}>
        <Text style={styles.buttonText}>Favorites</Text>
      </View>
    </TouchableHighlight>
  </View>

  const styles = StyleSheet.create({
   container: {
    width: '100%',
    flexDirection: 'row',
    backgroundColor: 'pink',
    alignItems: 'stretch',
    alignContent: 'stretch'
   },
   button: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
    alignSelf: 'stretch',
    backgroundColor: '#2196F3'
  },
  buttonText: {
   padding: 20,
   color: 'white'
  }
})

此时按钮仅从左到右水平覆盖屏幕的60％，如此 |[button1][button2][button3] |
我想这样做 |[ button1 ][ . button2 ][ button3 ]| 我已经尝试使用alignItems，alignContent和alignSelf进行拉伸，但没有任何效果，右侧有空白区域。

Answer 1

您可以使用slicers，在flex: 1上平均拉伸3个按钮：

button: {
  flex: 1,
  borderRadius: 4,
  borderWidth: 0.5,
  borderColor: '#d6d7da',
  backgroundColor: '#2196F3'
},

注意：<TouchableHighlight />是一个特殊的可触摸视图。在您的情况下，您可以直接在flex: 1上使用<TouchableHighlight />，但不能直接使用<TouchableWithoutNativeFeedback />。

对于$('#someID').html('I would interfare the DOM');，您的代码没问题。

Answer 2

尝试使用flex。它应该工作

<TouchableHighlight onPress={this._onPressButton} underlayColor="white" style={styles.button}>
    <Text style={styles.buttonText}>New</Text>
</TouchableHighlight>

<TouchableHighlight onPress={this._onPressButton} underlayColor="white" style={styles.button}>
    <Text style={styles.buttonText}>Search</Text>
</TouchableHighlight>

<TouchableHighlight onPress={this._onPressButton} underlayColor="white" style={styles.button}> 
    <Text style={styles.buttonText}>Favorites</Text>
</TouchableHighlight>

  const styles = StyleSheet.create({
   container: {
    flexDirection: 'row',
    backgroundColor: 'pink',
    flex:1
   },
   button: {
    flex:1,
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
    backgroundColor: '#2196F3'
  },
  buttonText: {
   padding: 20,
   color: 'white'
  }
})

如何使按钮伸展，以便他们采取屏幕的整个宽度作为反应原生？

2 个答案: