导出/呈现结构以使用组件react native

Question

我想要这个代码作为一个组件，而不是它加载我在一开始，简单地导出它，以使用它在另一个屏幕上，不是主页，我正在使用expo作为框架

我想要这个代码作为一个组件，而不是它加载我在一开始，简单地导出它，以使用它在另一个屏幕上，不是主页，我正在使用expo作为框架

import React from 'react';
import { StyleSheet, Text, ScrollView, View, TouchableWithoutFeedback } from 'react-native';

import { RadioButtons, SegmentedControls } from 'react-native-radio-buttons';

export default class App extends React.Component {

  state = {}

  render() {
    return (
      <View>
        {this.renderSegmentControlClone()}
      </View>
    );
  }

  // Super basic example
  
  renderSegmentControlClone(){
    const options = [
      'M',
      'F',
     
    ];

    function setSelectedOption(selectedSegment){
      this.setState({
        selectedSegment
      });
    }

    return (
      <View style={{ width: 335, }}>
        
        <SegmentedControls

tint= {'#C2E6E8'}
          
selectedTint= {'black'}
backTint= {'#FCFAF3'}
optionStyle= {{
  fontSize: 30,
  fontWeight: 'bold',
  fontFamily: 'semi-bold'
}}
containerStyle= {{
  marginLeft: 20,
  marginRight: 20,
}}
          options={ options }
          onSelection={ setSelectedOption.bind(this) }
          selectedOption={ this.state.selectedSegment }
        />
        <Text style={{marginTop: 10}}> {this.state.selectedSegment || 'none'}</Text>
      </View>);
  }
  }

Answer 1

在components文件夹中创建SegmentedControlComponent，如

// SegmentedControlComponent.js
export default class SegmentedControlComponent extends React.Component {
  state = {};

  render() {
    return <View>{this.renderSegmentControlClone()}</View>;
  }

  // Super basic example

  renderSegmentControlClone() {
    const options = ["M", "F"];

    function setSelectedOption(selectedSegment) {
      this.setState({
        selectedSegment,
      });
    }

    return (
      <View style={{ width: 335 }}>
        <SegmentedControls
          tint={"#C2E6E8"}
          selectedTint={"black"}
          backTint={"#FCFAF3"}
          optionStyle={{
            fontSize: 30,
            fontWeight: "bold",
            fontFamily: "semi-bold",
          }}
          containerStyle={{
            marginLeft: 20,
            marginRight: 20,
          }}
          options={options}
          onSelection={setSelectedOption.bind(this)}
          selectedOption={this.state.selectedSegment}
        />
        <Text style={{ marginTop: 10 }}>
          {" "}
          {this.state.selectedSegment || "none"}
        </Text>
      </View>
    );
  }
}

其他一些你想要使用它的屏幕，比如Example.js

import {SegmentedControlComponent} from "../components";

export default class Example extends React.Component {

  render() {
    return <SegmentedControlComponent />;
  }
}

在App.js中

export default class App extends React.Component {

  render() {
    return <View><Text>Home</Text></View>;
  }
}