Реагировать компонент, неожиданный маркер ошибка

Question

Я пытаюсь создать базовое приложение Секундомера, я хотел бы привести в порядок своей функции рендеринга, положив разметку на различные методы, например:

export default class stopwatch extends Component { 
render() { 
return <View style={styles.container}> 
    <View style ={[styles.header, this.border('yellow')]}> 
    <View style={this.border('red')} > 
    <Text> 
    00.00.00 
    </Text> 
    </View> 
    <View style={this.border('green')} > 
     {this.startStopButton()} 
     {this.lapButton()} 
    </View> 
    </View> 
<View styles={[style.footer, this.border('blue')]}> 
    <Text> 
    List of Laps 
    </Text> 
</View> 
}, 

Я хотел бы чтобы привести в порядок свою функцию рендеринга, положив разметку на различные методы, например:

startStopButton: function(){ 
return <View> 
      <Text> 
      Start 
      </Text> 
     </View> 
}, 
lapButton: function(){ 
    return <View> 
     <Text> 
      Lap 
     </Text> 
     </View> 
} 


}; 

Однако, я получаю сообщение об ошибке, Неожиданный Toekn линии 27, который эта линия

startStopButton: function(){ 
return <View> 

Любые идеи в этом нет.

Answer 1

Вы используете ES6 classes. Для методов класса вы не используете ключевое слово function. Кроме того, за запятыми не следуют методы. Опустить запятую в конце render и startTopButton:

export default class stopwatch extends Component { 
    startStopButton() { 
    return <View> 
      <Text> 
       Start 
      </Text> 
      </View> 
    } 

    lapButton() { 
    return <View> 
      <Text> 
      Lap 
      </Text> 
     </View> 
    } 

    render() { 
    return <View style={styles.container}> 
    <View style ={[styles.header, this.border('yellow')]}> 
    <View style={this.border('red')} > 
     <Text> 
     00.00.00 
     </Text> 
     </View> 
    <View style={this.border('green')} > 
     {this.startStopButton()} 
     {this.lapButton()} 
    </View> 
    </View> 
    <View styles={[style.footer, this.border('blue')]}> 
    <Text> 
     List of Laps 
    </Text> 
    </View> 
    } 
}