在React Native中使视图的父级宽度为80％

JavaScript

猴子猪猪

2020-03-12

我正在React Native中创建一个表单，并希望使TextInput屏幕宽度达到80％。

使用HTML和普通CSS，这很简单：

input {
    display: block;
    width: 80%;
    margin: auto;
}

除了React Native不支持display属性，宽度百分比或自动边距。

那我该怎么办呢？有这个问题的一些讨论中作出反应原住民的问题跟踪器，但提出的解决方案似乎是讨厌的黑客。

第1344篇《在React Native中使视图的父级宽度为80％》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
阳光乐 2020.03.13

这就是我得到解决方案的方式。简单而甜美。与屏幕密度无关：

export default class AwesomeProject extends Component {
    constructor(props){
        super(props);
        this.state = {text: ""}
    }
  render() {
    return (
       <View
          style={{
            flex: 1,
            backgroundColor: "#ececec",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <View style={{ padding: 10, flexDirection: "row" }}>
            <TextInput
              style={{ flex: 0.8, height: 40, borderWidth: 1 }}
              onChangeText={text => this.setState({ text })}
              placeholder="Text 1"
              value={this.state.text}
            />
          </View>
          <View style={{ padding: 10, flexDirection: "row" }}>
            <TextInput
              style={{ flex: 0.8, height: 40, borderWidth: 1 }}
              onChangeText={text => this.setState({ text })}
              placeholder="Text 2"
              value={this.state.text}
            />
          </View>
          <View style={{ padding: 10, flexDirection: "row" }}>
            <Button
              onPress={onButtonPress}
              title="Press Me"
              accessibilityLabel="See an Information"
            />
          </View>
        </View>
    );
  }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android