Question

如何使用React Native在render()中只返回1个？请参阅<SampleApp />中的render方法。

这是一个游乐场版本：https://rnplay.org/apps/t8KFig

视图应该是全屏的，就像在这个操场上一样：https://rnplay.org/apps/0GFbHg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView
} = React;


var SampleApp = React.createClass({

  getInitialState: function() {
    return {
      whichView: 'two'
    };
  },

  _renderViewOne: function() {
    return (
      <View style={[styles.tabContent, {backgroundColor: 'orange'}]}>
        <Text style={styles.tabText}>I like funny cake.</Text>
      </View>
    );
  },

  _renderViewTwo: function() {
    return (
      <View style={[styles.tabContent, {backgroundColor: 'blue'}]}>
        <Text style={styles.tabText}>
            Justin Beiber should sing Thrash Metal.
        </Text>
      </View>
    );
  },

  render: function() {  
    var showJSX = '';

    if ( this.state.whichView === 'one' ) {
        showJSX = (this._renderViewOne());
    } 
    else {
      showJSX = (this._renderViewTwo());
    }

    return (
      <ScrollView>
          {showJSX}
        </ScrollView>
    );
    }
});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'white',
    margin: 50,
  }
});

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

Answer 1

我已将showJSX var业务提取到另一种方法，因此它更清晰。

render: function() {  
  return (
    <ScrollView style={styles.bigContainer}>
      {this.viewPicker()}
    </ScrollView>
  );
},

viewPicker: function() {
  if ( this.state.whichView === 'one' ) {
    var showJSX = (this._renderViewOne());
  } 
  else {
    var showJSX = (this._renderViewTwo());
  }

  return showJSX;
}

您在ScrollView上缺少flex: 1和backgroundColor: 'blue'。

Here is a link to the updated playground

如何使用React Native在render（）中只返回1个？

1 个答案: