TextInput没有出现

时间:2017-06-02 04:58:33

标签: react-native textinput

我正在尝试学习React-Native,虽然到目前为止它非常顺利,但是我遇到了TextInput这个奇怪的问题。

我的页面应该呈现输入字段和开关,但它只显示一个开关。它工作得比较早,但是在编辑了一些其他组件后又回来了,它不再渲染,或者至少看起来不是。

以下是该组件的所有代码。

import React from 'react';
import {
  Text,
  View,
  TextInput,
  StyleSheet,
  Switch
} from 'react-native';
import { StackNavigator, NavigationActions } from 'react-navigation';

export default class Input extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      textVal: "",
      switchVal: false
    };
  }

  static navigationOptions = ({ navigation }) => ({
    title: `Input`,
  });

  onSubmit() {
    console.log("submitted");
  }

  onSwitchChange(value) {
    this.setState({
      switchVal: value
    });
  }


  render() {
    console.log("hello");
    return(
      <View>
          <TextInput
          style={styles.t2}
          onChangeText={(text) => this.setState({textVal: text})}
          placeholder="Hi"
          value={this.state.textVal}
          onSubmitEditing={this.onSubmit}
          />
          <Text style={styles.t1}>
            {this.state.textVal}
          </Text>
          <Switch
            value={this.state.switchVal}
            onValueChange={(value) => this.onSwitchChange(value)}
          />
      </View>
    );
  }
}

styles = StyleSheet.create({
  t1: {
    margin: 10,
    backgroundColor: 'red',
    width: 200,
  },
  t2: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    width: 200
  }
});

0 个答案:

没有答案