Question

我正在尝试在react native中设置滚动视图细分，并且已经设置了可滑动标签

我的代码是

import React, { Component } from 'react';
import {
 Platform,
 StyleSheet,
 ScrollView,
 Text,
 View,
 Image
 } from 'react-native';
import { Container, Icon, Left, Header, Body, Title, Right, Content, Footer, 
Segment, FooterTab, Button } from 'native-base';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
 });

 const home = () => (
 <View>
 <View style={{height: 43,backgroundColor:'red'}}>
 <ScrollView horizontal = { true } showsHorizontalScrollIndicator = { false 
 } style={{height:0}} style={styles.scroll}>
 <Segment style={styles.segment}>
          <Button
            style={{
              backgroundColor: this.state.seg === 1 ? "red" : undefined,
              borderColor: "red",
            }}
            first
            active={this.state.seg === 1 ? true : false}
            onPress={() => this.setState({ seg: 1 })}
          >
            <Text style={{ color: this.state.seg === 1 ? "#FFF" : "red" 
       }}>Puppies</Text>
          </Button>
          <Button
            last
            style={{
              backgroundColor: this.state.seg === 2 ? "red" : undefined,
              borderColor: "red",
            }}
            active={this.state.seg === 2 ? true : false}
            onPress={() => this.setState({ seg: 2 })}
          >
            <Text style={{ color: this.state.seg === 2 ? "#FFF" : "red" 
     }}>Cubs</Text>
          </Button>
        </Segment>
    </ScrollView> 
   </View>
   </View>

         );
     const search = () => (
         <View style={{ backgroundColor: '#673ab7' }} />
       );
         const post = () => (
           <View style={{ backgroundColor: '#000' }} />
        );
        const chat = () => (
            <View style={{ backgroundColor: '#673ab7' }} />
           );
            const explore = () => (
            <Icon name='menu' />
                   );

          type Props = {};
        export default class App extends Component<Props> {
           constructor(props){
            super(props);
           this.s = {

          seg: {
          s1: true,
           s2: false,
           s3: false,
            s4: false,
           s5: false,
           s6: false,
             s7: false,
             s8: false
             }
            }
             }
             state = {
              index: 0,
         routes: [
        { key: 'home', title: 'home' },
            { key: 's', title: 'select' },
          { key: 'p', title: 'Post' },
       { key: 'c', title: 'color' },
            { key: 'e', title: 'extra' },

         ],
          };

         render() {
            return (
          <Container Style={{flex:1}}>
              <Header style={styles.header}>
              <Left>
              <Button transparent>

               <Image style={styles.profile}
              source={require('./asset/img/profile.png')}
                />


                </Button>
             </Left>
                <Body>
                     <Title>Home</Title>
               </Body>
                   <Right >
                  <Icon name='notifications' style={styles.icon}/>
                  </Right>
            </Header>

                  <View style={{flex:1}}>
                <TabView style={{ }}
                 navigationState={this.state}
                 tabBarPosition='bottom'
                  renderScene={SceneMap({
                home: home,
                   s: s,
                     p: p,
                      c: c,
                         e: e,

                    })}
                    onIndexChange={index => this.setState({ index })}

                  />
                  </View>


                    </Container>
                );
               }
               }

我的错误是

this.state.seg在由SceneComponent创建时不起作用我该如何克服然后我安装了可滑动标签，本机基础和矢量图标

任何人都请救救我给我一些建议

Answer 1

您在构造函数this.s中，应该为this.state

Answer 2

home组件是functional component，它们没有state。您需要将home组件转换为Class Component。看一下列出这两者link

的区别的文档

您要做的就是改变

const Home = () => (
  <View>
  ...
  </View>
)

收件人

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      seg: /*initial value*/
    }
  }

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

希望这会有所帮助！

注意：以大写字母开头的组件名称，例如Home。

未定义不是反应本机中的对象（正在评估“ _this.state.seg”）

2 个答案: