Question

我一周前刚刚开始使用React Native开发。任何人都可以帮我简单渲染并将onPress切换到另一个视图吗？

我已经阅读了一些示例，但大多数都是剪切或不好的文档，就像在FaceBook Doc页面上一样。导航没有完全完成的例子。

以下是完成的内容 - 应该呈现的第一个视图：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableHighlight,
  TouchableNativeFeedback,
  Platform,
  Navigator
} from 'react-native';

export default class SignUp extends Component {
  buttonClicked() {
    console.log('Hi');
    this.props.navigator.push({title: 'SignUp', component:SignUp});
  }

  render() {
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === ANDROID_PLATFORM) {
      TouchableElement = TouchableNativeFeedback;
    }
    return (
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome to Cross-Profi!
          </Text>
          <Text style={styles.field_row}>
            <TextInput style={styles.stdfield} placeholder="Profession" />
          </Text>
          <Text style={styles.field_row}>
            <TextInput style={styles.stdfield} placeholder="E-mail" />
          </Text>
          <Text style={styles.field_row}>
            <TextInput style={styles.stdfield} secureTextEntry={true} placeholder="Password" />
          </Text>
          <TouchableElement style={styles.button} onPress={this.buttonClicked.bind(this)}>
            <View>
              <Text style={styles.buttonText}>Register</Text>
            </View>
          </TouchableElement>
          {/* <Image source={require("./img/super_car.png")} style={{width:120,height:100}} />*/}
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightblue',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'darkred',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  field_row: {
    textAlign: 'center',
    color: '#999999',
    margin: 3,
  },
  stdfield: {
    backgroundColor: 'darkgray',
    height: 50,
    width: 220,
    textAlign: 'center'
  },
  button: {
    borderColor:'blue',
    borderWidth: 2,
    margin: 5
  },
  buttonText: {
    fontSize: 18,
    fontWeight: 'bold'
  }
});

const ANDROID_PLATFORM = 'android';

应该呈现不同视图的Navigator类：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Platform,
  Navigator
} from 'react-native';

var MainActivity = require('./app/MainActivity.js');
var SignUp = require('./app/SignUp.js');

class AwesomeProject extends Component {
  /*constructor(props) {
    super(props);
    this.state = {text: ''};
  }*/

  render() {
    // this.props.navigator.push({title:'SignUp'});
    return (
      <Navigator initialRoute={{title:'SignUp', component:SignUp}}
      configureScene={() => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
      renderScene={(route, navigator) =>
        {
          console.log(route, navigator);
          if (route.component) {
            return React.createElement(route.component, {navigator});
          }
        }
      } />
    );
  }
}

const ANDROID_PLATFORM = 'android';

const routes = [
  {title: 'MainActivity', component: MainActivity},
  {title: 'SignUp', component: SignUp},
];

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

似乎不清楚是否必须有require类和类声明为export default。

有一个错误：元素类型无效：期望一个字符串，...但得到了对象等

帮助示例会很棒。 THX

Answer 1

在您的require调用中，您应该替换import语句或使用require模块的默认属性，即：

var MainActivity = require('./app/MainActivity.js').default;

或使用

import MainActivity from "./app/MainActivity";

在ES6中，要求不要将模块的默认属性赋值给变量。请参阅此blog post以更好地了解在es6中工作的需求

React Native渲染并使用导航器onPress进行切换

1 个答案: