如何设置TouchableWithoutFeedback的宽度取决于react-native中的文本？

Question

我用TouchableWithoutFeedback来做一个Button，但是按钮的宽度是全屏的宽度。

我希望这个按钮：

而这些是我的风格：

btnDependText: { 
    backgroundColor: '#29b088', 
} 

Answer 1

这是最有可能的容器，而不是按钮本身的事，看看这个零食，例如：https://snack.expo.io/@jamie/so-answer。

组件标记

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <TouchableWithoutFeedback style={styles.button} onPress={() => console.warn('pressed!')}> 
      <View style={styles.buttonInner}> 
      <Text>Button</Text> 
      </View> 
     </TouchableWithoutFeedback> 
     </View> 
    ); 
    } 
} 

样式

如果你风格的容器：

container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    }, 

那么你应该得到你所追求的外观。

但是，如果您删除了alignItems: center，那么您会看到该按钮变为全角。

希望有帮助！